Easy Jquery validation in Asp.net 4

With Asp.net 4 comes a new property named ClientIDMode wich allow us to take control over the control ID rendered client side.

The property can be applied at:

  • Page level, all the controls within page will maintain the same ID specified by the developer : <%@ Page Title=”” Language=”C#” MasterPageFile=”~/MyMaster.Master” CodeBehind=”NewFeature.aspx.cs” ClientIDMode=”Static”….
  • Control level , the button control will not change ID: <asp:Button runat=”server” ID=”submitUser” Text=”Submit user” ClientIDMode=”Static”/>

Now, if nested in a server container, we are sure the button will be always rendered as: <input type=”submit” name=”submitUser” value=”Submit user” id=”submitUser” /> instead of <input type=”submit” id=”ContentPlaceHolder1_submitUser” … />.

We can now access asp.net controls in our scripts using the ID as a selector. In this sample the new ClientIDMode feature used with the jQuery Validation plugin .

image image

myScript.js (in the source there is also the variant with rules init one by one:

function SetCollectiveRules() {
    $("#form1").validate({
        rules: {
            emailTxt: { required: true, email: true },
            passwordTxt: { required: true, minlength:7 }
        },
        messages: {
            emailTxt: {required:'email required', email:'email invalid'},
            passwordTxt: {required:'password required', minlength:'password too short'}
        },

        highlight: function (element, errorClass) {
            $(element).fadeOut("fast", function () {
                $(element).fadeIn("fast")
            })
        }, 

        errorPlacement: function(error, element) {
            error.insertAfter(element);
            //add custom code if you want to add a class to the error message (es tootip).
        }

    });
 }

 $(document).ready(function () {

     //registering the onclick event responsible for form validation
     $('#submitUser').click(function (event) {

         //initialize the form validation plugin by setting all the rules
         SetCollectiveRules();

         var isValid = $("#form1").valid();  

         //preventing submit until input is valid
         if (!isValid)
             event.preventDefault();
     });

Here you can find the source code for the project.




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *