Home > DeveloperSection > Blogs > Jquery Validation Client side

Jquery Validation Client side


JavaScript JQuery  Jquery Validate  Jquery Plugins 
Ratings:
0 Comment(s)
 835  View(s)
Rate this:

Jquery Validation Client side

Hi everyone in this blog I’m explaining about jquery validation.

Description:

"But doesn't jQuery make it easy to write your own validation plugin?"
Sure, but there are still a lot of subtleties to take care of: You need a standard library of validation methods (such as emails, URLs, credit card numbers). You need to place error messages in the DOM and show and hide them when appropriate. You want to react to more than just a submit event, like keyup and blur.
You may need different ways to specify validation rules according to the server-side enviroment you are using on different projects. And after all, you don't want to reinvent the wheel, do you?

"But aren't there already a ton of validation plugins out there?"
Right, there are a lot of non-jQuery-based solutions (which you'd avoid since you found jQuery) and some jQuery-based solutions. This particular one is one of the oldest jQuery plugins (started in July 2006) and has proved itself in projects all around the world. There is also an
article discussing how this plugin fits the bill of the should-be validation solution.

Example:

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />

<div class="container">

    <div class="row">

        <div class="well col-md-6 col-md-offset-3">

            <h3 class="text-center text-primary">Login</h3>

            <hr />

            @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "commentForm" }))

            {

                <div class="row form-group has-feedback">

                    <div class="col-md-12">

                       

                        <label for="cname">Name (required, at least 2 characters)</label>

                        <input id="cname" name="name" class="form-control" minlength="2" type="text" required>

                    </div>

                </div>

                <div class="row form-group has-feedback">

                    <div class="col-md-12">

                        <label for="cemail">E-Mail (required)</label>

                        <input id="cemail" type="email" class="form-control" name="email" required>

                    </div>

                </div>

                <div class="row form-group has-feedback">

                   

                    <div class="col-md-12">

                       

                        <label for="curl">URL (optional)</label>

                        <input id="curl" type="url" class="form-control" name="url">

                    </div>

                </div> 

                <div class="row form-group has-feedback">

                    <div class="col-md-12">

                        <label for="ccomment">Your comment (required)</label>

                        <textarea id="ccomment" class="form-control" name="comment" required></textarea>

                    </div>

                </div>

                <div class="col-md-12 text-right"><button type="submit" class="btn btn-primary">Submit</button></div>

 

            }

        </div>

    </div>

</div>

<script src="~/Scripts/jquery.min.js"></script>

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

<script>

    $("#commentForm").validate();

</script>

 

Output:

1.       When run application first time

2.       When submit form without fill any field

3.       When fill name field and emailed(not correct format) field

 

 

4.       When fill name field, emailed field and url field(not correct format)

 

in my next post i'll explain about Getting Started with Linq Queries


Don't want to miss updates? Please click the below button!

Follow MindStick