Glad I read all the replies….really nice work here all. Keep it up…

Nice to see that this article is still helpful are so long, so thanks for that.
I was wondering if you ever implemented a way to reset validation errors only within the validationGroup? jQuery validate supports a resetForm method, but I couldn’t find away to reset only a validation group.

Thanks, Schmulik.

Instead, I completely avoided by adding new custom validators which do the same thing (probably the more correct way to implement this in any case.

So that’s an additional validator like:

 
jQuery.validator.addMethod("atLeastOneTelephone", function (value, element) {
    return $('.vTelephoneHome').val() != "" || $('.vTelephoneMobile').val() != "";
}, "Please enter either your Home Telephone or your Mobile Telephone:");

Then you have to add the validation to the elements as normal:

 
$('.vTelephoneHome').rules('add', {
        atLeastOneTelephone: true,
        messages: {
            atLeastOneTelephone: 'Please enter either your Home Telephone or your Mobile Telephone:'
        }
    });
 
$('.vTelephoneMobile').rules('add', {
        atLeastOneTelephone: true,
        messages: {
            atLeastOneTelephone: ''
        }
    });

(The mobile validator intentionally has empty error message so you only get the error once and it’s always the first one i.e. the one nearer the TelephoneHome control)

… and just for completeness you’d need to trigger the validation so it validates on keyup of either box e.g.:

 
//Revalidate Telephone Mobile whenever something is entered in the Telephone Home box
    $('.vTelephoneHome').keyup(function () {
           $('.vTelephoneMobile').valid();
    });
 
//Revalidate Telephone Home whenever something is entered in the Telephone Mobile box
    $('.vTelephoneMobile').keyup(function () {
            $('.vTelephoneHome').valid();
    });

So in short, avoid this bug by keeping as far away from it as possible and not using the dependency callback for the required validtion methos

Hope that helps.

 
//Telephone Home validation
    $('.vTelephoneHome').rules('add', {
        required: function (element) {
            return $('.vTelephoneHome').val() == "" && $('.vTelephoneMobile').val() == "";
        },
        messages: {
            required: 'Please enter either your Home Telephone or your Mobile Telephone'
        }
    });

When coupled with the same call back for the mobile telephone and some additional logic to make these re-validate on keyup of either box, this works perfectly but ONLY for the dynamic validation (e.g. form submitted with no telephone numbers and then telephone numbers entered so error messages appear and disappear as they should).

The problem comes with when you actually submit the form. The following code is the problem:

 
    $group.find(':input').each(function (i, item) {
        if (!$(item).valid())
            isValid = false;
    });

Because $(item).valid() returns false (not valid) for the $(‘.vTelephoneHome’) element, even when the callback function returns false (i.e. the field should NOT be required).

Peter’s solution above would not work because items are only ‘required’ under certain circumstances and to my knowledge don’t get given the required class dynamically.

I’m looking at a pretty hacky work around on this at the moment, but I just wondered if anybody had found a more elegant and fix-all workaround to this bug.

// Initialize validation on the entire ASP.NET form.
$("#form1").validate({
  // This prevents validation from running on every
  //  form submission by default.
  onsubmit: false,
  // You can also mix in more complex validation rules:
  rules: {
    Zip: {
      minlength: 5
    }
  }
});

I updated the example code on GitHub with an example of that, if you want to look at a working example.

Now, the intricacy of using JQuery UI dialog is that by default it takes the wrapped dialog out of the

<form></form>

since it’s appended before the

</body>

tag. This is a problem as jquery-validation plugin relies on elements being inside the

<form></form>

or they will not get validated.

To mitigate this issue, make sure to place the dialog inside the form when you open it:

Now, the intricacy of using JQuery UI dialog is that by default it takes the wrapped dialog out of the since it’s appended before the tag. This is a problem as jquery-validation plugin relies on elements being inside the or they will not get validated.

To mitigate this issue, make sure to place the dialog inside the when you open it:

$mydialog.dialog("open").parent().appendTo("form")