JavaScript - jquery form validation - Asked By shah zeb on 09-Dec-11 01:31 AM

Hi,
Can any body give me a good complete example of form validation.
Regards,
Jitendra Faye replied to shah zeb on 09-Dec-11 01:34 AM
Use Jquery validation plugin.

jQuery plugin makes simple clientside form validation trivial, while offering lots of option for customization.


follow this link-

http://docs.jquery.com/Plugins/Validation
Suchit shah replied to shah zeb on 09-Dec-11 01:36 AM

A rule can be applied to an input field in two ways:

1. Declarative, the rule is specified in the input field by means of the class attribute:

<

input name="email" id="email" maxlength="60" class="required email" type="text"/>

As you can see, two rules were specified in the class attribute, "Required" and "Email", which means that two validations have to be performed for this field. Many rules can be applied to the same field, they only have to be separated by an space.

2. Imperative in code, the rule is specified in an script:

<

script type="text/javascript">

$(document).ready(function(){

$("#form-sign-up").validate( {

rules: {

email: {

required: true,

email: true

},

messages: {

email: {

required: "Please provide an email",

email: "Please provide a valid email"

} });

});

</

script>

The validation was attached to the input field "email" in the form "form-sign-up". The message displayed when a validation fails for an specific field can also be customized using the "messages" section in the script. (This is optional, the plugin already comes with a set of pre-defined error messages)

And finally, one of the most interesting validation rules you can find there is "remote", which performs a remote validation using an Ajax endpoint. At this point we can use an MVC controller method to perform an specific validation, for instance to see if a login name is still available to be used.

<

script type="text/javascript">

$(document).ready(function(){

$("#form-sign-up").validate( {

rules: {

login: {

required: true,

remote: '<%=Url.Action("IsLoginAvailable", "Accounts") %>'

}

},

messages: {

login: {

required: "Please provide an alias",

remote: jQuery.format("{0} is already in use")

}

} });

});

</

script>

The only requirement for the controller is that it must be return Json with the result of the validation

Anoop S replied to shah zeb on 09-Dec-11 01:43 AM
With javascript, and especially with jQuerys explosion in popularity, validation has become easier to implement. It has given web developers the scope to create forms that are not only accessible and visually appealing, but also, and most importantly, easy to use and understand.

refer this nice tutorial-> 10 Useful jQuery Form Validation Techniques and Tutorials

http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/
Riley K replied to shah zeb on 09-Dec-11 01:45 AM

Jquery provides you plugin for easy validations

Using the plugin you can specify rules like

               required: true,
                minlength: 2

Include this scripts in the head section

<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery.validate.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery.validate.wrapper.js" type="text/javascript"></script>
  
<script type="text/javascript" language="javascript">
  
  $(document).ready(function () {
    // 1. prepare the validation rules and messages.
    var rules = {
      textbox1: {
        required: true,
        minlength: 2
      },
      textbox2: "required",
      textbox3: "required"
    };
    var messages = {
      textbox1: {
        required: "textbox1 is required",
        minlength: "textbox1 needs to be at least length 2"
      },
      textbox2: "textbox2 is requried",
      textbox3: "textbox3 is required"
    };
  
    // 2. Initiate the validator
    var validator
      = new jQueryValidatorWrapper("FormToValidate",
        rules, messages);
  
    // 3. Set the click event to do the validation
    $("#btnValidate").click(function () {
      if (!validator.validate())
        return;
  
      alert("Validation Success!");
    });
  });
      
</script>

Regards
DL M replied to shah zeb on 09-Dec-11 03:55 AM
Hi..

check this link you will get sample code

http://speckyboy.com/2009/12/17/10-useful-jquery-form-validation-techniques-and-tutorials-2/

http://flowplayer.org/tools/validator/