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

Question

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.

Alexander · Accepted Answer · 2013-02-28 21:27:52Z

1

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,

edited Feb 28, 2013 at 21:27

Alexander

23.5k11 gold badges65 silver badges74 bronze badges

answered Sep 21, 2010 at 19:39

Jsinh

2,5892 gold badges20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jsinh Over a year ago

and if you want to check both the dropdown list value try this >>>>>>>> return ($('#prefix').val() == '' && $('#suffix').val() == '')

BBonifield · Accepted Answer · 2010-09-21 19:34:43Z

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() != " ";
       }
     }
   }
 },

answered Sep 21, 2010 at 19:34

BBonifield

5,01321 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related