javascript - Ejemplo de reglas de validación JQuery más simples
validation declarative (4)
La entrada en el marcado falta "type" , la entrada (texto supongo) tiene el atributo name="name" e ID="cname" , el código proporcionado por Ayo llama a la entrada llamada "cname" * donde debería estar "nombre" .
El siguiente formulario HTML utiliza con éxito la validación de formularios de jQuery, mostrando "Este campo es obligatorio" a la derecha del campo del formulario si se deja en blanco, y "Ingrese al menos 2 caracteres" si se ingresaron menos de 2 caracteres. Sin embargo, en lugar de que se especifiquen los metadatos de validación utilizando los atributos class y minlength en el campo de entrada del formulario "cname", me gustaría usar la API de "reglas" de jQuery, donde las reglas se especifican en el cuerpo de la función de validación. Gracias por adelantado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="/lib/js/jquery.js"></script>
<script src="/lib/js/jquery.validate.js"></script>
<script>
$(document).ready(function(){$("#commentForm").validate(
/*
rules/messages here
*/
);}
);
</script>
</head>
<body>
<form id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
Los ejemplos contenidos en esta entrada de blog hacen el truco.
$("#commentForm").validate({
rules: {
cname : { required : true, minlength: 2 }
}
});
Debería ser algo así, acabo de escribir esto en el editor aquí, así que podría ser un error de sintaxis o dos, pero debería poder seguir el patrón y la documentation
rules: {
cname: {
required: true,
minlength: 2
}
},
messages: {
cname: {
required: "<li>Please enter a name.</li>",
minlength: "<li>Your name is not long enough.</li>"
}
}