Using JQuery validation in custom usercontrol

Question

I have a website that is able to take payments from a user on multiple pages. I am originally a winforms coder so I am trying to centralize all of the fields that are requried for a payment in one custom user control. I have the user control all set up and ready to go and am now trying to implement validation using the JQuery plugin.

I originally tried putting the validation tied to the usercontrols child controls on the usercontrol itself and when the payment usercontrol was the only thing on the page it seemed to work as expected, the issue arose when there was other information aside from the payment that needed to be validated.

It looked to me like since the form that contained all the controls only had one name(obviously) the usercontrols validate declaration was wiping out the main pages validate declaration, because if I removed the custom controls validate declaration then the main pages validate worked as expected and vice versa.

I found this question which talks about manually adding validation to individual controls based on the class name of the control. When I tried doing that I was getting an error in the JQuery.validate.js file itself (on: if(command){var settings=$.data(element.form,'validator').settings; for what its worth) After examining the values through my dev environment I found that the error is that $.data(element.form,'validator') is undeclared so it can't reference the settings.

Form and control declarations:

<form id="MasterPageForm" runat="server" class="entireForm">
    <asp:TextBox id="txtmoveInDate" class="txtmoveInDate" runat="server" />
    <mo:PaymentDialog runat="server" ID="PaymentInput" ClassName="SubmitPayment" DisplayDesc="Submit" IsAmmountEditable="false" />
</form>

Main page Validation Declaration:

$.validator.setDefaults();
$(document).ready(function() {
    $('#aspnetForm').validate({
        rules: {
      <%=txtmoveInDate.UniqueID%>:  { required: true, date: true }
        }
        messages: {
      <%=txtmoveInDate.UniqueID%>: {
                required: "Please enter the move in date.",
                date: "Please enter a valid move in date."
   }
    }
});

Class selector validation declaration:

$('.txtAccountnumber').rules("add", { 
    required: true, 
    creditcard: true, 
    minlength: 15, 
    maxlength: 16 
});
$('.txtAccountnumber').messages("add", {
    required: "You must supply the credit card account number.",
    minlength: "Please enter a valid Credit Card account number.",
    maxlength: "Please enter a valid Credit Card account number.",
    creditcard: "Please enter a valid Credit Card account number."
});

Thats a very watered down version of the page but all other controls are declared the same way there are just too many of them to include here. The order the sections appear on the page is the same as how I listed them here. txtAccountnumber is a textbox inside the PaymentDialog usercontrol and the class name is hard coded to txtAccountnumber.

My questions are first, is it possible to do what I am trying? Second, is there a better way to accomplish this? And third, am I missing a key step in implementing the validation that is causing the jquery.validate.js file itself to throw an error?

score 0 · Accepted Answer · answered Apr 29 '13 at 15:52

I was able to solve this by using the validator.addClassRules function and aliasing the methods I wanted to use for the actual validation.

I think the problem was that I had the main forms validation being added in the main pages ready function and the user controls validation was being set up outside of the ready function.

So in the end I moved the validation to its own function in a .js file on the side, included the .js file before setting up the ready function and then called the function to add the usercontrol validation inside the pages ready function.

Using JQuery validation in custom usercontrol

1 Answers1