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 .
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.
