Question

I have a form that has a field (Field A) that needs to be empty if Option 1 is selected on a dropdown, and is required if Option 2 is selected. I have some javascript that clears and disables the Field A when Option 1 is selected.

I have Simon Ince’s RequiredIf attribute applied to Field A in the model, dependant on Option 1, and it works well. That’s not the problem.

Here’s the sequence of events that does cause a problem:

1. User has Option 2 selected (so that field A is required) and Field A empty.
2. User clicks on Save. Validation message appears by field A and in the validation summary. All is well.
3. User changes to Option 1. Field A becomes disabled.
4. User clicks on Save. Validation message remains by Field A but does not appear in the Validation Summary.

I conclude from this that the RequiredIf validation is working (and Field A is passing validation), but the old validation message is sticking around. Which I do not want.

All this is client-side, by the way.

If the field isn’t disabled, everything works as expected, but I’d like it disabled rather than editable but “required to be empty”.

Other than clear out the message SPAN tag through js and jQuery, is there a way to fix this?

Answer 1

Because the validation requirements are changing, you need to cause validation to occur, and then update all of the error messages. Since the issue relates to the change of the selected item on the dropdownlist, add the following:

$("#myDropDown").live("change", function() { // assumes dropdownlist has id of 'myDropDown'
    $("form").validate().form(); // form() causes error messages to update
});