Validación de Form usando jQuery Validation Plugin

Validación de formularios del lado del cliente es muy útil para validar un formulario y hace que tu proyecto web más fácil de usar. Usted puede encontrar muchas maneras de realizar la validación del lado cliente en formulario HTML y jQuery Plugin de validación es la forma más fácil de validar un formulario. JQuery Plugin de validación permite implementar la validación de formularios al instante con muchas opciones de personalización. 

Este tutorial le mostrará cómo integrar validación de formulario del lado del cliente usando el plugin de validación de jQuery. Además, este código de validación de formulario de ejemplo le ayudará a utilizar mensajes y reglas de validación personalizada. En el script de ejemplo, demostramos una validación de formulario de registro con diferentes reglas y mensajes personalizados. 

Usar jQuery Plugin de validación es necesario incluir la librería jQuery (jquery.min.js) y biblioteca de plugin de validación de jQuery (jquery.validate.js).

<script src="jquery.min.js"></script>
<script src="jquery.validate.js"></script>

El método validate() se utiliza para validar un formulario basado en el selector de siempre. 
reglas son pares clave/valor, definición de reglas personalizadas. Clave es el nombre de un elemento y el valor es un objeto formado por pares de parámetro 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 validación 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 métodos de validación utilizados, también se pueden utilizar muchas otras reglas de validación según su requisito. Ver la lista de métodos de validación incorporados desde sitio Web Plugin.