Não há como personalizar um alert javascript, mas você pode utilizar Ajax com PHP e jQuery, e ao invés de alerta apresentar um modal, um excelente que eu recomendo é o bootstrap
.
O código está todo comentado
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript">
$(document).ready(function(){
// tudo que estiver aqui poderá ser executado, após o documento ser carregado
$("#form").on("submit", function(e){
// está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
$.ajax({
// está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
url: "validaProtocolo.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
data: data, // aqui vai os dados para o servidor, geralmente é os inputs do form
method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
success: function(data){
// essa é a function success, ela ira ser executada se a requisição for feita com sucesso
// a variavel data, veio do parametro da function, e será a resposta do php.
if (data=="Protocolo Invalido"){
$("#myModalError").modal('show');
}else{
$("#myModalSucess").modal('show');
/*
se o usuario clicar no button close do modal
ou em qualquer parte do documento será redirecionado
*/
$(document).click(function(){
window.location.href = "http://pt.stackoverflow.com";
});
}
},
error: function(){
// essa é funcion error, ela será executada caso ocorrer algum erro na requisição
alert("erro na requisição");
}
});
});
});
</script>
<fieldset style="width:50%; margin: 0px auto; ">
<legend>Colocando PONTO no CPF</legend>
<form id="form">
<label for="protocolo">Protocolo</label>
<input type="number" name="protocolo" placeholder="Numero do protocolo" required />
<input type="submit" value="ENVIAR" name="button"/><br/><br/>
</form>
</fieldset>
<!-- Modal HTML Sucesso -->
<div id="myModalSucess" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Sucesso </h4>
</div>
<div class="modal-body">
<p>Tarefa Adicionada com sucesso. </p>
<p class="text-warning"><small>Sucesso Sucesso Sucesso Sucesso Sucesso Sucesso .</small></p>
</div>
<div class="modal-footer">
<button onclick="location.href='http://pt.stackoverflow.com';" type="button" class="btn btn-success waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal HTML Erro -->
<div id="myModalError" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Erro</h4>
</div>
<div class="modal-body">
<p class="text-warning"><small>Protocolo incorreto, favor informar um valido. </small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Também é possível redirecionar automaticamente em caso de sucesso:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript">
$(document).ready(function(){
// tudo que estiver aqui poderá ser executado, após o documento ser carregado
$("#form").on("submit", function(e){
// está função diz, que quando esse formulario for enviado, tudo oque estiver aqui será executado.
e.preventDefault(); // está função é usada pro form não ir para outra pagina, pois o evento padrão de um formulario é ir para outra pagina.
var data = $("#form").serialize(); // a function serialize serve para pegar todos os valores que foram colocados nos inputs do form
$.ajax({
// está é a função ajax, do jquery, ela será usada para fazer a requisição assícrona.
url: "validaProtocolo.php", // aqui vai a url da requisição, nela é colocado o valor do atributo action da tag form
data: data, // aqui vai os dados para o servidor, geralmente é os inputs do form
method: "POST", // aqui vai o método da requisição, acho que você já sabe sobre o get e post !
dataType: "json", // aqui será o tipo de resposta que vamos receber, será no formato json, um formato simples e mais usado.
success: function(data){
// essa é a function success, ela ira ser executada se a requisição for feita com sucesso
// a variavel data, veio do parametro da function, e será a resposta do php.
if (data=="Protocolo Invalido"){
$("#myModalError").modal('show');
}else{
window.location.href = "http://pt.stackoverflow.com";
}
},
error: function(){
// essa é funcion error, ela será executada caso ocorrer algum erro na requisição
alert("erro na requisição");
}
});
});
});
</script>
<fieldset style="width:50%; margin: 0px auto; ">
<legend>Protocolo válido 1234</legend>
<form id="form">
<label for="protocolo">Protocolo</label>
<input type="number" name="protocolo" placeholder="Numero do protocolo" required />
<input type="submit" value="ENVIAR" name="button"/><br/><br/>
</form>
</fieldset>
<!-- Modal HTML Erro -->
<div id="myModalError" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Erro</h4>
</div>
<div class="modal-body">
<p class="text-warning"><small>Protocolo incorreto, favor informar um valido. </small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Em ambos os casos requer a seguinte página:
validaProtocolo.php
<?php
$protocolo = $_POST['protocolo'];
/*
código para validar protocolo
exemplos:
1 -um select no banco where coluna = $protocolo
if ($row[0] > 0) {
echo json_encode("Protocolo OK");
}else{
echo json_encode("Protocolo Invalido");
}
2- se um valor existe em um array
*/
//utilizado nos exemplos funcionais
$protocolosValidos = array("1234", "5678", "9012", "3456");
if (in_array($protocolo, $protocolosValidos)) {
echo json_encode("Protocolo OK");
}else{
echo json_encode("Protocolo Invalido");
}
?>
uma solução
para seu caso.