Error showing div with jQuery

1

I started using bootstrap and I realized that JQuery is used, and I started to program a bit with this library the subject in question, it does not work a validation that reigates.

<form  method="post" id="ingresar" >
             <input name="nombre" type="text"  id="nombre" placeholder="Nombre" />
             <div id="mnom" class="errores"  >El nombre no es valido</div>
             <button type="submit" name="insertar" id="btn-insert">Insertar</button>
</form>

This is the form I want to validate for the moment I want to validate that only letters are entered and that it is not empty

 <script>
    var numeros = /^[0-9]+$/;
    $(document).ready(function(e) {

    $("#btn-insert").click(function(e) {
        var nombre= $("#nombre").val();

        if(nombre == "" || numeros.test(nombre)){
            $("#mnom").fadeIn();
            return false;
        }else{
            $("#mnom").fadeOut();
            }
    });
});

Validation does not work the form sends me the same data and does not show me the div with id = mnom

    
asked by Johann Sebastian Painevil Len 28.07.2018 в 19:54
source

1 answer

1

Validation done in the onsubmit of the form, so that if it returns false it is not sent.

<form  method="post" id="ingresar" onsubmit="return Comprobar();">
   <input name="nombre" type="text"  id="nombre" placeholder="Nombre" />
   <div id="mnom" class="errores"  >El nombre no es valido</div>
   <button type="submit" name="insertar" id="btn-insert">Insertar</button>
</form>

<script>
function Comprobar (){
   var numeros = /^[0-9]+$/;
   var nombre= $("#nombre").val();

   if(nombre == "" || numeros.test(nombre)){
      $("#mnom").fadeIn();
      return false;
   } else {
      $("#mnom").fadeOut();
   }
   return true;
}
</script>
    
answered by 28.07.2018 в 20:35