Question

I have a dropdown list that I’m converting over to a custom modal dialog. The conversion requires that we have a text field that shows the name of the item selected and a hidden field that holds the ID of the item selected:

<input id="template" type="text" class="text inactive" value="Select a template...">
<span class="button">Select...</span>

<input id="templateid" type="hidden" class="required" name="template" title="You must select a template.">

When the user clicks on the Select… button, a modal dialog pops up, allowing the user to pick a template. After the user is done selecting a template, the template text box is set with the name of the template, and the templateid hidden field is set with the ID of the template:

$('#templateDialog .okButton').click(function() {
    var item = $(this).find('li.selected');
    var name = item.find('.name').text();
    var id = item.find('.id').text();
    
    $('#template').val(name);
    $('#templateid').val(id);
    $('#templateDialog').dialog('close');
});

All this is working fine. The issue I’m running into now is validation, using jQuery Validation. Because the hidden input has the required class, when I try to submit the form without picking a template, the error message is displayed properly. However, the template text box is not styled. I would like it to get the invalid class.

My question is, how do I configure jQuery so that, if the templateid hidden field is invalid, the template text box is invalid as well, and if it’s valid, the text box is valid as well?

Update: here’s a picture:

See how the Confirm password text box has a red outline, but the Template text box does not? I’d like for it to be red too.

Answer 1

jQuery validation plugin provides two handlers to customize the way the erroneous fields are changed visually: highlight and unhighlight.

$(".selector").validate({
    highlight: function(element, errorClass, validClass) {

        if ([case of the input]) {
        // check here the case of you file input and add the errorClass to the file input or its container
        }
        else {
         // don't forget to apply the class to element in the other cases as defining this handler will remove the default behavior
            $(element).removeClass(validClass).addClass(errorClass);
        }
     }
});

Do the contrary with unhighlight handler.

Hope this helps,
d.