jQuery Validation plugin in ASP.NET Web Forms

Question

I would really like use the jQuery Validation plugin in my ASP.NET Web Forms application (not MVC). I find it easier than adding asp validators everywhere and setting the co

Answer 1

A great way to do this is to use:

<%= textbox.Name %> or <%= textbox.ClientId %> whenever you need to reference a server item.

i.e.

var phoneNumb = $('#<%= tPhone.ClientID %>').val(); 

or

$("#signupForm").validate({
        rules: { 
                <%= username.Name %>: {
                        required: true,
                        minlength: 2
                }, },
        messages: { 
                <%= username.Name %>: {
                        required: "Please enter a username",
                        minlength: "username at least 2 characters"
                }, 
        }.

.......

Answer 2

You can checkout the rules add function, but basically here's what you can do:

jQuery(function() {
    // You can specify some validation options here but not rules and messages
    jQuery('form').validate(); 
    // Add a custom class to your name mangled input and add rules like this
    jQuery('.username').rules('add', { 
        required: true, 
        messages: { 
            required: 'Some custom message for the username required field' 
        } 
    });
});

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" />

This way no need to worry about the crappy identifiers generated by the webforms engine.

Answer 3

I recommend using jQuery.simple.validator, its easy, lightweigh and customizable validator compatible with asp.net web forms, because basically it can perform validations in any container, not only

https://github.com/v2msoft/jquery.simple.validator

I recommend you check the plugin and the documentation. Usage:

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script>

<div id="container">
    <!-- REQUIRED FIELD -->
    <label>Required Field: </label><br/>
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/>

    <input type="button" value="Validate" onclick='javascript:validate();' />
</div>


<script type="text/javascript">
    function validate() {
        $("#container").initialize();
        var ok = $("#container").validate();
        if (!ok)  alert("There are errors");
        else alert("Form is ok");
    }
</script

Answer 4

The information in this article led me to use Control.ClientID when looking for a match with jQuery... Very useful information...

<label for="<%= tbName.ClientID %>">Name</label>
<input id="cphBody_tbName" runat="server" .../>

Answer 5

I recently posted a patch file for xVal.WebForms which resolves the multiple forms issue relaying on the well known ASP.Net validation Group. This patch also supports the ASP.Net CausesValidation property.

Yo can read about it here: http://cmendible.blogspot.com/

Answer 6

You can check xVal.webForms here: http://xvalwebforms.codeplex.com/