Question

I am using jQuery validation plugin ( http://bassistance.de/jquery-plugins/jquery-plugin-validation/ )

I have following structure:

<select name="s1" id="s1">
   <option value="url">url</option>
   <option value="normal">normal</option>
</select>
<input name="s1_value" id="s1_value" type="text" />

Now, I need validation rule (using jQuery validation plugin) as

If I select ‘url’ as value in list box, then input field should only contain valid URL

If I select ‘normal’ as value in list box, then input field can contain any text

For any selection, value for input field should not be empty

How to do this?

Answer 1

The validation plugin allows rules to be specified in each element’s class. You can start with the required and url rules:

<input name="s1_value" id="s1_value" type="text" class="required url" />

From there, you can remove the url class if the list box value becomes normal:

$("#s1").change(function() {
    if ($(this).val() == "url") {
        $("#s1_value").addClass("url");
    } else {
        $("#s1_value").removeClass("url");
    }
});

That way, the validation plugin won’t validate the field against the url rule, since it does not expose that rule in its class.

You can test this solution here.