Resend form and validate again after validation failure

Question

Hello I have a form in which all fields are being validated by jquery, however when the validation fails and shows the messages I can’t resubmit and keeps showing me the error message

Follow the form:

        <form role="form" id="formularioContacto" method="post">
          <div class="form-group">
            <label for="pNome">Primeiro Nome:</label>
            <input type="text" class="form-control" name="pNome" id="pNome">
            <span id="erro-pNome"></span>
          </div>
          <div class="form-group">
            <label for="uNome">Último Nome:</label>
            <input type="text" class="form-control" name="uNome" id="uNome">
            <span id="erro-uNome"></span>
          </div>
          <div class="form-group">
            <label for="cPostal">Código Postal:</label>
            <input type="text" class="form-control" name="cPostal" id="cPostal">
            <span id="erro-cPostal"></span>
          </div>
          <div class="form-group">
            <label for="localidade">Localidade:</label>
            <input type="text" class="form-control" name="localidade" id="localidade">
            <span id="erro-localidade"></span>
          </div>
          <div class="form-group">
            <label for="telefone">Telefone:</label>
            <input type="text" class="form-control" id="telefone" name="telefone">
            <span id="erro-telefone"></span>
          </div>
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" class="form-control" id="email">
            <span id="erro-email"></span>
          </div>      
          <button type="submit" id="submeterForm1"  class="btn btn-default">Enviar</button>
    </form>

Follow the javascript validation code:

<script type="text/javascript">

$( "#submitterForm1" ).click(Function(and) {

//e.preventDefault();

var pNome = $('#pNome').val().trim();
var uNome = $('#uNome').val().trim();
var cPostal = $('#cPostal').val().trim();
var localidade = $('#localidade').val().trim();
var telefone = $('#telefone').val().trim();
var email = $('#email').val().trim();

var validacao = true;   

if(!telefone.match(/^(9|2)\d{8}$/)){
    $("#erro-telefone").html("<b style='color:red;'>Por favor preencha o seu telefone correctamente.</b>");
    validacao = false;
};

if (pNome == null || pNome == "") {

    $("#erro-pNome").html("<b style='color:red;'>Por favor preencha o seu primeiro nome,</b>");
    //$("#erro-pNome").delay(2000).hide('slow');
    validacao = false;
};

if (uNome == null || uNome == "") {

    $("#erro-uNome").html("<b style='color:red;'>Por favor preencha o seu último nome,</b>");
    validacao = false;


};


if(!cPostal.match(/^[0-9]{4}\-[0-9]{3}/)) {

    $("#erro-cPostal").html("<b style='color:red;'>Por favor preencha o seu código postal completo correctamente.</b>");
    validacao = false;


};    

if(!email.match(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {

    $("#erro-email").html("<b style='color:red;'>Por favor preencha o seu email correctamente.</b>");
    validacao = false;

};

if(localidade == null || localidade == '') {

    $("#erro-localidade").html("<b style='color:red;'>Por favor preencha a sua localidade.</b>");
    validacao = false;

};

if (validacao == false) { 
    return false;
}else{
    return true
};


});
</script>

Answer 1

Already solved, just insert an Else in each validation

Follow the validation code:

$( "#submeterForm1" ).click(function(e) {

//e.preventDefault();

var pNome = $('#pNome').val().trim();
var uNome = $('#uNome').val().trim();
var cPostal = $('#cPostal').val().trim();
var localidade = $('#localidade').val().trim();
var telefone = $('#telefone').val().trim();
var email = $('#email').val().trim();

var validacao = true;   

if(!telefone.match(/^(9|2)\d{8}$/)){
    $("#erro-telefone").html("<b style='color:red;'>Por favor preencha o seu telefone correctamente.</b>");
    validacao = false;
}else{
    $("#erro-telefone").html("<b style='color:red;'></b>");

};

if (pNome == null || pNome == "") {

    $("#erro-pNome").html("<b style='color:red;'>Por favor preencha o seu primeiro nome.</b>");
    //$("#erro-pNome").delay(2000).hide('slow');
    validacao = false;
}else{
    $("#erro-pNome").html("<b style='color:red;'></b>");
};


if (uNome == null || uNome == "") {

    $("#erro-uNome").html("<b style='color:red;'>Por favor preencha o seu último nome´.</b>");
    validacao = false;

}else{
    $("#erro-uNome").html("<b style='color:red;'></b>");
};



if(!cPostal.match(/^[0-9]{4}\-[0-9]{3}/)) {

    $("#erro-cPostal").html("<b style='color:red;'>Por favor preencha o seu código postal completo correctamente.</b>");
    validacao = false;        
}else{
    $("#erro-cPostal").html("<b style='color:red;'></b>");      
}; 



if(!email.match(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/)) {

    $("#erro-email").html("<b style='color:red;'>Por favor preencha o seu email correctamente.</b>");
    validacao = false;

}else{
    $("#erro-email").html("<b style='color:red;'></b>");        
};

if(localidade == null || localidade == '') {

    $("#erro-localidade").html("<b style='color:red;'>Por favor preencha a sua localidade.</b>");
    validacao = false;

}else{
    $("#erro-localidade").html("<b style='color:red;'></b>");
};

if (validacao == false) { 
    return false;
}else{
    return true
};


});