Applying jQuery validation to text boxes in a user control

I would like to validate 3 text boxes in a user control that is embedded in my web form and have been able to get it to validate one of the controls but can’t seem to get it to work with all 3.  Currently I’ve exposed the clientID of the text boxes of my
user control and have assigned it to a variable in my jquery but I need to be able to pass all 3 controls to the function that adds the rules and I’m not sure how to accomplish this task.  I would also like to set some extra parameters where if textbox 1 and
2 are populated textbox 3 doesn’t have to be populated, also if textbox 3 is populated, textbox 1 and 2 aren’t required to be populated.

The code I’ve come up with so far is as follows:

<script type="text/javascript">

 $(document).ready(function () {
      var firstNameCtrl = $(‘#<%= addressInfo.FirstNameClientID %>’);
      var lastNameCtrl = $(‘#<%= addressInfo.LastNameClientID %>’);
      var companyNameCtrl = $(‘#<%= addressInfo.CompanyClientID %>’);

      firstNameCtrl.focus();

      $(‘form’).validate({

              highlight: function (element, errorClass) {
                   $(element).addClass("invalidElem");
               },
              unhighlight: function (element, errorClass) {
                   $(element).removeClass("invalidElem");
              },
              errorElement: "div",
              errorClass: "errorMsg"
       });

           $(firstNameCtrl).each(function (index, elem) {
                var rules = {
                               required: true 
                                 }

          $(elem).rules("add", rules);
           });
      }); //end ready

 </script>

Any
assistance would be appreciated.

Thanks

 

Hi,

You can check this post-

http://forums.asp.net/t/1570162.aspx/1

Thanks for the link but I would rather not use code behind.  I’ve been messing around with this and was able to come up with something that kind of meets my needs, only problem is that from a user perspective it would be rather confusing.  If textbox 1 and
2 are populated, textbox 3 is no longer requried and vice versa, if textbox 3 is populated, textbox 1 and 2 are no longer required.  What I’ve come up with almost meets the bill, it will function properly on submit of the form but when entering data if textbox
1 and 2 are populated, textbox 3 will still show as required, unfortunately I don’t know how to make textbox 3 not be required in the change function of textbox 1 and 2.

Here is my code so far, any assistance would be appreciated.  Thanks

 

<script type="text/javascript">
        $(document).ready(function () {
            var firstNameCtrl = $('#<%= addressInfo.FirstNameClientID %>');
            var lastNameCtrl = $('#<%= addressInfo.LastNameClientID %>');
            var companyNameCtrl = $('#<%= addressInfo.CompanyClientID %>');
            firstNameCtrl.focus();

            $('form').validate({
                highlight: function (element, errorClass) {
                    $(element).addClass("invalidElem");
                },
                unhighlight: function (element, errorClass) {
                    $(element).removeClass("invalidElem");
                },
                errorElement: "div",
                errorClass: "errorMsg"
            });

            $.validator.addClassRules({
                nameValidation: {
                    required: {
                        depends: function (element) {
                            return ($(companyNameCtrl).val() == '');
                        } //end depends
                    } //end required
                }, //end nameValidation
                companyValidation: {
                    required: {
                        depends: function (element) {
                            return ($(firstNameCtrl).val() == '' &&
                                    $(lastNameCtrl).val() == '');
                        }
                    }
                }
            })

            $(firstNameCtrl).add(lastNameCtrl).addClass("nameValidation").change(function (e) {
                $('form').validate().element($(e.target));
            });
            $(companyNameCtrl).addClass("companyValidation").change(function (e) {
                $('form').validate().element($(e.target));
        });
</script>

Leave a Reply