Jquery validate submits invalid forms -
i´m trying create basic validation of html form, i´m using jquery valate achieve this. main problem form submitted when of fields still invalid. second problem custom message want show aren´t appearing. here html:
<head> <script src="jquery-2.1.1.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="jquery.validate.min.js"></script> <script src="mine.js"></script> <meta charset="utf-8"> <title>test</title> </head> <body> <form id="formnewclient" class="form-horizontal" style="margin-right:30px;"> <h2>cliente nuevo</h2> <div class="form-group"> <label>nombre</label> <input id="inpclientname" name="inpclientname" type="text" class="form-control" required><span style="color: red">*</span> </div> <div class="form-group"> <label for="inpclientid">id</label> <input id="inpclientid" name="inpclientid" type="number" class="form-control" required><span style="color: red">*</span> </div> <div class="form-group"> <label for="inpclientaddress">dirección</label> <input id="inpclientaddress" name="inpclientaddress" type="text" class="form-control" required> </div> <div class="form-group" > <label for="inpclientphone">teléfono</label> <input id="inpclientphone" name="inpclientphone" type="tel" class="form-control"> </div> <div class="form-group" > <label for="inpclientmail">email</label> <input id="inpclientmail" name="inpclientmail" type="email" class="form-control"> </div> <div class="form-group"> <input id="submitbutton" class="btn btn-default" type="submit" value="guardar"/> </div> </form> </body> js
$("#formnewclient").validate({ rules: { inpclientname: { required: true, minlength:3, maxlength: 20, lettersonly: true }, inpclientid: { required: true, minlength: 8, maxlength: 8, digits: true }, inpclientaddress: { required: false, minlength:3, maxlength: 30 }, inpclientphone: { required: false, phoneus: true }, inpclientmail: { required: false, minlength: 4, email: true } }, messages: { inpclientname: { required: "por favor, ingrese el nombre del cliente", minlenght:"el nombre debe ser mayor 3 caracteres", maxlength: "el nombre debe ser menor los 20 caracteres", lettersonly:"el nombre solo debe poseer caracteres" }, inpclientid: { required: "por favor, ingrese el id del cliente", minlength: "el id debe tener 8 digitos", maxlength: "el id debe tener 8 digitos" }, inpclientaddress: { minlength:"la direccion debe ser mayor dos caracteres", maxlength: "la direccion debe ser menor los 30 caracteres" }, inpclientphone: { required: "ingrese el numero de telefono", phoneus: "el telefono ingresado no es correcto" }, inpclientmail: { minlength: "el mail debe tener por lo menos 6 caracteres", email: "por favor ingresa una dirección de mail válida" } } }); thanks in advance.
i think work. need make sure dom loaded before executing script, wrapped with:
$(function() { . . . }); and, don't think validate plug-in supports:
lettersonly: true digits: true phoneus: true
you'll have that. anyways, seems work:
<!doctype html> <html lang="en"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"> </script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"> </script> <script type="text/javascript"> $(function() { $("#formnewclient").validate({ rules: { inpclientname: { required: true, minlength:3, maxlength: 20 }, inpclientid: { required: true, minlength: 8, maxlength: 8, digits: true }, inpclientaddress: { required: true, minlength:3, maxlength: 30 }, inpclientphone: { required: false }, inpclientmail: { required: false, minlength: 4, email: true } }, messages: { inpclientname: { required: "por favor, ingrese el nombre del cliente", minlenght:"el nombre debe ser mayor 3 caracteres", maxlength: "el nombre debe ser menor los 20 caracteres" }, inpclientid: { required: "por favor, ingrese el id del cliente", minlength: "el id debe tener 8 digitos", maxlength: "el id debe tener 8 digitos" }, inpclientaddress: { required: "por favor, ingrese la direccion del cliente", minlength:"la direccion debe ser mayor dos caracteres", maxlength: "la direccion debe ser menor los 30 caracteres" }, inpclientphone: { required: "ingrese el numero de telefono" }, inpclientmail: { minlength: "el mail debe tener por lo menos 6 caracteres", email: "por favor ingresa una dirección de mail válida" } } }); }); </script> <meta charset="utf-8"> <title> test </title> </head> <body> <form id="formnewclient" class="form-horizontal" style="margin-right:30px;"method="get" action=""> <h2> cliente nuevo </h2> <div class="form-group"> <label> nombre </label> <input id="inpclientname" name="inpclientname" type="text" class="form-control" required> <span style="color: red"> * </span> </div> <div class="form-group"> <label for="inpclientid"> id </label> <input id="inpclientid" name="inpclientid" type="number" class="form-control" required> <span style="color: red"> * </span> </div> <div class="form-group"> <label for="inpclientaddress"> dirección </label> <input id="inpclientaddress" name="inpclientaddress" type="text" class="form-control" required> <span style="color: red"> * </span> </div> <div class="form-group"> <label for="inpclientphone"> teléfono </label> <input id="inpclientphone" name="inpclientphone" type="tel" class="form-control"> </div> <div class="form-group"> <label for="inpclientmail"> email </label> <input id="inpclientmail" name="inpclientmail" type="email" class="form-control"> </div> <div class="form-group"> <input id="submitbutton" class="btn btn-default" type="submit" value="guardar" /> </div> </form> </body> </html> 
Comments
Post a Comment