Jquery Form Validation Plugins

jQuery plugin that can be used for forms validation.When form validation work without having to reload the page.This Jquery plugins make simple User side form validation.JQuery plugin that validates the form fields and send the valid form data to the server.

User trying to submit an invalid form, the first invalid element is focused, allowing the user to correct the field.
Before submitting the form for the first time, the user can tab through fields without filling messages. They focus on this element and display message i.e. This feild is require
Once a field is marked invalid, When user has entered the necessary value in this focused feild, the error message is removed.

Adding Jquery and Css File

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script type='text/javascript' src='sm-validator.js'></script>
?

Html Form

<form method="post" action="/" id="smValidationForm">
            
            <div class="form-group">
                <label>Full Name</label>
                <input class="form-control" type="text" name="name" autocomplete="off">
            </div>
             <div class=" form-group">
                <label>Mobile</label>
                <input class="form-control" type="text" name="mobile">
            </div>
            <div class=" form-group">
                <label>Email</label>
                <input class="form-control" type="email" name="email" autocomplete="off">
            </div>
            <div class="clearfix"></div>
            <div class=" form-group">
                <label>User Name</label>
                <input class="form-control" type="text" name="username" autocomplete="off">
            </div>
            <div class=" form-group">
                <label>Password</label>
                <input class="form-control" type="password" name="password">
            </div>
            <div class=" form-group">
                <label>Confirm Password</label>
                <input class="form-control" type="password" name="confirm_password">
            </div>
            <div class="clearfix"></div>
           
            <div class=" form-group">
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>?

Add Jquery Plugins

<script type="text/javascript">
    
    (function ($) {
        var rules = {
            name: {
                notEmpty: {
                    message: "The title is required"
                },
                stringLength: {
                    min: 3,
                    max:15,
                    message: "The title length must be within 3 to 15."
                }
            },
              mobile: {
                notEmpty: {
                    message: "The Mobile no field is required"
                },
               stringLength: {
                    min: 10,
                    max:10,
                    message: "Invalid Mobile No."
                }
            },
            email: {
                notEmpty: {
                    message: "The email field is required"
                },
                email: {
                    message: "The email must be valid!",
                }
            },

             username: {
                notEmpty: {
                    message: "The email field is required"
                },
                stringLength: {
                    min: 3,
                    max: 15,
                    message: "The name length must be within 3 to 15."
                }
            },
            password: {
                 stringLength: {
                    min: 4,
                    max: 15,
                    message: "Password length Must  4 or greter than 4"
                },
                notEmpty: {
                    message: "The password field is required"
                },
                match: {
                    message: "The password and confirm password must be match!",
                    field: 'confirm_password'
                }
            },
            count: {
                count: {
                    type: 'checkbox', //here 2 types available like class and checkbox
                    min: 2,
                    massageDivId: 'your Message section id',
                    message: "The count field must be greter then 2!",
                }
            },
            remoteCheck: {
                remote: {
                    url: 'Your url will be here',
                    type: 'get', //your ajax form method and success return must be 1 for true validation
                    message: "The count field must be greter then 2!",
                }
            },
            type: {
                notEmpty: {
                    message: "The package type is required"
                },
                itsDependable: {
                    rules: {
                        1: {
                            'pricing_detail_1[price_type]': {
                                'notEmpty': {
                                    message: "The package price type is required"
                                }
                            },
                        },
                        2: {
                            'pricing_detail_2[basic_pricing_title]': {
                                'notEmpty': {
                                    message: "The package basic price title is required"
                                }
                            },
                        }
                    }

                }
            }

        };

        smValidator("smValidationForm", rules, 1);
    })(jQuery);
</script>
?

After Form validation

Jquery Form Validation Plugins

Some important things for form validation

Search

Categories