Jquery Conditional validation based on select text

Question

I want to make the "other" field required ONLY if the selected text in the "select1" field is "other" the rule I'm trying is: other: { required: function(element){ return $("#select1 option:selected").text() == "Other"; } } Am i doing something wrong? Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-  validation/jquery.validate.js"></script>
  <script>
  $(document).ready(function(){
    $('form:first').validate({
        rules: {
          cname: {
          required: true,
        },
        select1: { valueNotEquals: "0" }
        },
        other: {
                required: function(element){
                            return $("#select1 option:selected").text() == "Other";
                        }
        },   
        messages: {
          cname: "Please enter a valid naaaammmeeee.",
      select1: "Please choose a valid option",
      other: "Please enter a valid other value",
        },
      });

       $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
        }, "Value must not equal arg.");
  });
  </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="cname"/>
   </p>
   <p>
   <select name="select1" id="select1">
    <option value="0">Please choose a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">Other</option>
    </select>
    </p>
    <p>
    <label for="other">Other</label>
        <em>*</em><input id="other" name="other"/>
   </p>
       <p>
       <input class="submit" type="submit" value="Submit"/>
       </p>
 </fieldset>
 </form>
</body>
</html>

What exactly you want to achieve here? Can you be more specific please? — Amar
– Amar, Commented Dec 18, 2012 at 18:18

Amar · Accepted Answer · 2012-12-18 19:11:20Z

1

There were multiple problems mostly related to JSON formatting:

one extra closing bracket here:

select1: { valueNotEquals: "0" }
    },

One closing bracket missing here at the end of the rules definition and just before the start of messages definition

return $("#select1 option:selected").text() == "Other"; } } },
messages: {
Extra comma at end of each options were un-necessary
Space in the validate.js path (this might be a typo here in the question itslef)

here is the corrected code:

...

    <script src="http://code.jquery.com/jquery-latest.js"></script>
      <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
      <script>
        $(document).ready(function(){
    $('form:first').validate({
    rules: {
        cname: { required: true },
        select1: { valueNotEquals: "0" },
        other: { required: function(element){
                            return $("#select1 option:selected").text() == "Other";
                            }
            }
},   
        messages: {
            cname: "Please enter a valid naaaammmeeee.",
            select1: "Please choose a valid option",
            other: { required: "Please enter a valid other value"}
            }
});
...

edited Dec 18, 2012 at 19:11

answered Dec 18, 2012 at 18:44

Amar

12k5 gold badges52 silver badges73 bronze badges

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

6 Comments

nelsie Over a year ago

Thanks Amar. That worked a treat. I'm relatively new to JQuery, and haven't gotten to grips with all the syntax rules just yet. Your help is much appreciated.

Amar Over a year ago

Cheers man :) Now, you should accept the answer and make it a habit to do so in future too if you feel satisfied with the answer. I am saying in general :)

nelsie Over a year ago

Sorry Amar, though the validation is now working, my messages are being ignored, and the default "This field is required" is coming through. Is there something else missing here?

Amar Over a year ago

try it now. I have edited the code for now, need to change the explanation a bit, in the mean time you test the code above.

nelsie Over a year ago

just back on this today. No that didn't seem to work. Cheers.

|

Jai · Accepted Answer · 2012-12-18 19:20:27Z

1

updated the answer find a demo at fiddle here: http://jsfiddle.net/3jrTM/

$('form:first').validate({
rules: {
    cname: {
        required: true
    },
    select1: {
        valueNotEquals: "0"
    },
    other: {
        required: function(element) {
            return $("#select1 option:selected").text() == "Other";
        }
    },
},
messages: {
    cname: "Please enter a valid naaaammmeeee.",
    select1: "Please choose a valid option",
    other: "Please enter a valid other value"
}

});

$.validator.addMethod("valueNotEquals", function(value, element, arg) {
return arg != value;
}, "Value must not equal arg.");

edited Dec 18, 2012 at 19:20

answered Dec 18, 2012 at 18:31

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

nelsie Over a year ago

Thanks Jai. That part is working. It's the following rule that's giving me problems.

nelsie Over a year ago

Sorry Jai, I was away for a day. Thanks you very much for your answer.

mr_app · Accepted Answer · 2012-12-18 18:29:49Z

0

You can delete the value of your option which contains the "0".

<option>Select here someting</option>

When a option contains no value atrribute, than jQuery validate handles this as empty or not given.

<select class="required"><option>Select here someting</option></select>

You can add 'required' as class to your selectbox so jQuery validate will promt a "required" warning.

answered Dec 18, 2012 at 18:29

mr_app

1,3022 gold badges17 silver badges37 bronze badges

Comments

ashley · Accepted Answer · 2012-12-18 18:38:22Z

0

$('select').change(function() {
   var text = $('select option:selected').text();
   if(text == 'Other') {
       $('input[name=other]').attr('disabled', false);        
    }
  });

is this what you mean

edited Dec 18, 2012 at 18:38

answered Dec 18, 2012 at 18:19

ashley

2,7675 gold badges28 silver badges39 bronze badges

1 Comment

nelsie Over a year ago

Apologies if the description is unclear. I want to make the "other" field required ONLY if the selected text in the "select1" field is "other" the rule I'm trying is: other: { required: function(element){ return $("#select1 option:selected").text() == "Other"; } },

Collectives™ on Stack Overflow

Jquery Conditional validation based on select text

4 Answers 4

6 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related