Validacin de Form usando jQuery

Validation Plugin
Validacin de formularios del lado del cliente es muy til para validar un formulario y
hace que tu proyecto web ms fcil de usar. Usted puede encontrar muchas maneras de
realizar la validacin del lado cliente en formulario HTML y jQuery Plugin de validacin es
la forma ms fcil de validar un formulario. JQuery Plugin de validacin permite
implementar la validacin de formularios al instante con muchas opciones de
personalizacin.

Este tutorial le mostrar cmo integrar validacin de formulario del lado del cliente
usando el plugin de validacin de jQuery. Adems, este cdigo de validacin de
formulario de ejemplo le ayudar a utilizar mensajes y reglas de validacin personalizada.
En el script de ejemplo, demostramos una validacin de formulario de registro con
diferentes reglas y mensajes personalizados.

Usar jQuery Plugin de validacin es necesario incluir la librera jQuery (jquery.min.js) y

biblioteca de plugin de validacin de jQuery (jquery.validate.js).
<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>
El mtodo validate() se utiliza para validar un formulario basado en el selector de
siempre.
reglas son pares clave/valor, definicin de reglas personalizadas. Clave es el nombre de
un elemento y el valor es un objeto formado por pares de parmetro de regla o una
cadena simple. los mensajes
son pares de clave/valor definir mensajes personalizados. Clave es el nombre de un
elemento y el valor es un mensaje que se muestra en el elemento respectivo.
$(document).ready(function() {
$("#userForm").validate({
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
required: true,
number: true
},
url: {
required: false,
url: true
},
username: {
required: true,
minlength: 6
},
password: {
required: true,
 minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
agree: "required"
},
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
phone: {
required: "Please enter your phone number",
number: "Please enter only numeric value"
},
url: {
url: "Please enter valid url"
},
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 6 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long",
equalTo: "Please enter the same password as above"
},
agree: "Please accept our policy"
}
});
});

codigo HTML. el formulario de registro de usuario HTML que es validado con jQuery Plugin
de validacin de HTML.
<form class="userform" id="userForm" method="post" action="">
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" >
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" type="email" name="email" >
</p>
<p>
<label for="phone">Phone</label>
<input id="phone" type="phone" name="phone" >
</p>
<p>
 <label for="url">URL</label>
<input id="url" type="url" name="url">
</p>
<p>
<label for="username">Username</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="confirm_password">Confirm password</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="agree">Please agree to our policy</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</form>

codigo CSS. El siguiente CSS se utiliza para labrar el mensaje de error y la forma.
.userform{width: 400px;}
.userform p {
width: 100%;
}
.userform label {
width: 120px;
color: #333;
float: left;
}
input.error {
border: 1px dotted red;
}
label.error{
width: 100%;
color: red;
font-style: italic;
margin-left: 120px;
margin-bottom: 5px;
}
.userform input.submit {
margin-left: 120px;
}

Aqu hemos utilizado sobre todo mtodos de validacin utilizados, tambin se pueden
utilizar muchas otras reglas de validacin segn su requisito. Ver la lista de mtodos de
validacin incorporados desde sitio Web Plugin.