tags:

views:

99

answers:

3
Q: 

JQuery Validate using addClassRules: What am I missing?

I've put together a snippet of code in ASP.NET MVC in which I'm trying to use the addClassRules methods of jQuery's validator. From what I can tell I'm taking this straight of the examples on

http://docs.jquery.com/Plugins/Validation/Reference

But the page is just submitted it doesn't show any errors. I would like to use the "addClassRules" pattern for validation because I'm writing dynamic forms.

Here's my View.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ValidateMyForm</title>
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
</head>
<body>
    <% using (Html.BeginForm()) { %>        

        <input type="text" value="" name="customer1" class="customer" />
        <input type="text" value="" id="customer2" name="customer2" class="customer" />
        <input type="text" name="customer3" class="customer" />

        <p>
            <input type="submit" name="submit" value="Submit" />
        </p>
    <% } %>
    <script language="javascript" type="text/javascript">
        jQuery(document).ready(function () {
            // alias required to cRequired with new message
            $.validator.addMethod("cRequired", $.validator.methods.required, "Customer name required");
            // alias minlength, too
            $.validator.addMethod("cMinlength", $.validator.methods.minlength, $.format("Customer name must have at least {0} characters"));
            // combine them both, including the parameter for minlength
            $.validator.addClassRules("customer", { cRequired: true, cMinlength: 2 });
        })
    </script>
</body>
</html>

Any suggestions?

UPDATED: Fully functional code...

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>ValidateMyForm</title>
    <script src="<%= Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
</head>
<body>
    <% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "demoform" }))
        { %>        

        <%: Html.TextBox("myTextBox", "", new {@class = "cRequired"}) %>

        <p>
            <input type="submit" name="submit" value="Submit" />
        </p>
    <% } %>
    <script language="javascript" type="text/javascript">
        jQuery(document).ready(function () {
            $.validator.addClassRules("cRequired", { required: true });

            jQuery("#demoform").validate();
        })
    </script>
</body>
</html>
+1  A: 

Never used this validator before, but it looks like your syntax is a bit off. Also, you're not defining cRequired anywhere.

Please note that none of the following has been tested.

First You'll need to define cRequired:

$.validator.addMethod("cRequired", $.validator.methods.required,
  "Customer name required");

Next you'll need to add a validator to a class (where "YourClassName" is the class this should apply to.)

jQuery.validator.addClassRules("YourClassName", {
  cRequired: true
});

OR

jQuery.validator.addClassRules({
 YourClassName: {
   cRequired: true
 }
});

You'll then need to add the class to your inputs:

<input id="txtOne" type="text" class="YourClassName">
<input id="txtTwo" type="text" class="YourClassName">
<input id="txtThree" type="text" class="YourClassName">

Hope this helps...

Sources:

Brandon Boone  2010-09-14 16:01:21
Thanks. In my prev example I was thinking I could just refer to "required" as my rule. Unfortunetly though this did not fix my problem. But I have updated my example to use pretty much the exact code from http://docs.jquery.com/Plugins/Validation/Reference.
Justin  2010-09-14 17:03:30
+1  A: 

So turns out that you MUST have the following line in the jQuery(document).ready() function as well.

jQuery("#demoform").validate();

"demoform" being the name of your Form element. In my case (MVC) I gave it this name as followings...

<% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "demoform" })) { %>
Justin  2010-09-14 17:28:58
Sweet deal! Glad you were able to figure it out. You should mark this as the answer for other users facing the same problem.
Brandon Boone  2010-09-14 17:52:16
Thanks I will but SO forces me to wait 1 day:) I've updated the question to show the complete working solution.
Justin  2010-09-14 18:25:53
A: 

You could try this jQuery validation plugin

Andy  2010-10-03 18:45:40

related questions

Would you override ScriptControl or BaseValidator for an async ASP.NET validator control?
Handling HttpRequestValidationException gracefully and ASP.net AJAX compatible?
How to Dynamically Generate String Validation?
Validate email address in Javascript?
Data Validation Design Patterns
Strong Validation in WPF
How to evaluate an IP?
Validating a HUGE XML file
Validate (X)HTML in Python
ValidationRule To Enforce Unique Name
Checking if userinput is a valid URI in XUL
XML Parser Validation Report
Email SMTP validator
MVC - where to implement form validation (server-side)?
How do you remove invalid hexadecimal characters from an XML-based data source prior to constructing an XmlReader or XPathDocument that uses the data?
How to check set of files conform to a naming scheme
What's the best way to implement field validation using ASP.NET MVC?
How do I validate xml against a DTD file in Python
What's the best way to validate an XML file against an XSD file?
Problem databinding an ASP.Net AJAX toolkit MaskedEditExtender
Validating posted form data in the ASP.NET MVC framework
Best method for varchar date validation in Sybase (T-SQL)?
How important is W3C XHTML/CSS validation when finalizing work?
How far should one take e-mail address validation?
ASP .Net Custom Client-Side Validation