Using Jquery Validation Plugin's required( dependency-expression )

Question

Hi I'm using the jQuery Validation plugin, and I'm trying figure out how i can make a name field required if a prefix (Mr, Ms, etc) or a suffix (Jr, Sr, PhD) is selected. This is what I have:

$('#geninfo').validate({
  rules:{
   firstname: {required: function(element){
      return $("#prefix").val() != " ";
      }
    }
   },
  messages:{
   firstname: 'enter a name'
   }       
 });

Here is the HTML:

<ul>
                <li><label for="prefix">Prefix:</label>
                 <select name="prefix" id="prefix">
                      <option selected="selected" value=" ">Select One</option>
                        <option value="ms">Ms</option>
                        <option value="miss">Miss</option>
                        <option value="mrs">Mrs</option>
                        <option value="mr">Mr</option>
                        <option value="dr">Dr</option>
                    </select>
                </li>
<li><label for="firstname">First Name:</label> <input type="text" name="firstname" id="firstname" /></li>
<li><label for="suffix">Suffix:</label>
                 <select name="suffix" id="suffix">
                      <option selected="selected" value=" ">Select One</option>
                        <option value="jr">Jr</option>
                        <option value="sr">Sr</option>
                        <option value="ii">II</option>
                    </select>
                </li></ul>

I can't seem to figure out how i would write the js so that it would account for the prefix || suffix. any clues as to what I am doing wrong? thanks in advance.

Answer 1

I think you're looking for the depends rule - http://docs.jquery.com/Plugins/Validation/validate#toptions

 rules:{
   firstname: {
     required: {
       depends: function(element) {
         return $("#prefix").val() != " ";
       }
     }
   }
 },

Answer 2

you have an error in you HTML

             <select name="prefix" id="prefix">
                  <option selected="selected" value=" ">Select One</option>
                    <option value="ms">Ms</option>
                    <option value="miss">Miss</option>
                    <option value="mrs">Mrs</option>
                    <option value="mr">Mr</option>
                    <option value="dr">Dr</option>
                </select>

in the above HTML code

<option selected="selected" value=" ">Select One</option>

value is having a "space" - " " not empty

and when you are checking you are checking for empty instead of space so it is not yielding any results.

Changed your code to this removed the space in value of selected option

             <select name="prefix" id="prefix">
                  <option selected="selected" value="">Select One</option>
                    <option value="ms">Ms</option>
                    <option value="miss">Miss</option>
                    <option value="mrs">Mrs</option>
                    <option value="mr">Mr</option>
                    <option value="dr">Dr</option>
                </select>

and executed this java script and it worked well.

        $('#geninfo').validate({
            rules: {
                firstname: {
                    required: function () {
                        return $('#prefix').val() == ''
                    }
                }
            },
            messages: {
                firstname: alert('enter a name')  //enter a name'
            }

        });

Hope this helps,

Regards, J'Sinh