Conditional Validation using JQuery Validation Plugin

Question

I have a simple html form that I've added validation to using the JQuery Validation plugin. I have it working for single fields that require a value. I now need to extend that so that if a user answers Yes to a question they must enter something in the Details field, otherwise the Details field can be left blank. I'm using radio buttons to display the Yes/No. Here's my complete html form - I'm not sure where to go from here:

    <script type="text/javascript" charset="utf-8">
    $.metadata.setType("attr", "validate");
    $(document).ready(function() {
    $("#editRecord").validate();
    });
    </script>

    <style type="text/css"> 
    .block { display: block; }
    form.cmxform label.error { display: none; } 
    </style>

    </head>
    <body>

            <div id="header">
                <h1>
                    Questions</h1>
            </div>
            <div id="content">
                <h1>
                    Questions Page 1
                </h1>
          </div>
    <div id="content">
                <h1>
                </h1>
                <form class="cmxform" method="post" action="editrecord.php"     id="editRecord">
                <input type="hidden" name="-action" value="edit">
                  <h1>
                    Questions                
                  </h1>

          <table width="46%" class="record">
          <tr>
          <td width="21%" valign="top" class="field_name_left"><p>Question 1</p></td>
          <td width="15%" valign="top" class="field_data">
           <label for="Yes">
            <input type="radio" name="Question1" value="Yes" validate = "required:true" /> Yes
            </label>
            <label for="No">
   <input type="radio" name="Question1" value="No" /> No
            </label>
            <label for="Question1" class="error">You must answer this question to proceed</label>
            </td>
          <td width="64%" valign="top" class="field_data"><strong>Details:</strong>
          <textarea id = "Details1" class="where" name="Details1" cols="25" rows="2"></textarea></td>
          </tr>
     <tr>
          <td valign="top" class="field_name_left">Question 2</td>
<td valign="top" class="field_data">
   <label for="Yes">
            <input type="radio" name="Question2" value="Yes" validate = "required:true" /> Yes
            </label>
            <label for="No">
   <input type="radio" name="Question2" value="No" /> No
            </label>
            <label for="Question2" class="error">You must answer this question to proceed</label>
        </td>
     <td valign="top" class="field_data"><strong>Details:</strong>
              <textarea id = "Details2" class="where" name="Details2" cols="25" rows="2"></textarea>           </td>
   </tr>
          <tr class="submit_btn">
                          <td colspan="3">
                                <input type="submit" name="-edit" value="Finish">
                                <input type="reset" name="reset" value="Reset">            </td>
            </tr>
          </table>
      </form>
    </div>
    </body>
    </html>

Nick Craver · Accepted Answer · 2010-05-19 01:21:58Z

19

On your <textarea> elements, add a dependency expression for required, for example for question 1, do this:

validate="required:'input[name=Question1][value=Yes]:checked'"

This says if $('input[name=Question1][value=Yes]:checked').length > 0 then the field is required, so if Yes is checked, it's required :)

You can see a working demo here

edited May 19, 2010 at 1:21

answered May 19, 2010 at 0:51

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

6 Comments

Steve Kemp Over a year ago

Thanks for your answer. I've added the code into the <textarea> elements but when I select Yes it still lets me submit the form without entering any text into the Details field. Any ideas what I'm doing wrong?

Nick Craver Over a year ago

@Steve - Here's your code with what I have above added and working, make sure the quotes and all are correct: jsfiddle.net/H2YLp

Steve Kemp Over a year ago

OK thanks that's great I've got it working now. I appreciate your help, didn't realise it would be quite a simple change to implement this. This is really a bonus question but I would also like to make the label for the textarea input field change colour to red once the user clicks Yes to indicate that this is now a required field. Clicking No would remain black. So if the user clicks Yes for Question 1 the: <strong>Details:</strong> for Question 1 would then change colour to red. Any ideas?

Nick Craver Over a year ago

@Steve - That would be a .change() handler on those elements, here's an example, note how I change the labels...this should be how your <label> elements relate to your <input> elements :) jsfiddle.net/8J3K6

Steve Kemp Over a year ago

Thanks Nick - that changes the label for "Yes" in the radio button input. What I want to do is change the label for "Details" if the corresponding answer is "Yes". So user clicks "Yes" to Question 1 and the Details label changes to red. Also selecting "Yes" for an answer and trying to Submit displays the error under the Details textarea as expected. However if you change your answer to "No" it doesn't remove the error label under the textarea field - do you know if there is a way to remove it when "No" is clicked if it was displayed?

|

PetersenDidIt · Accepted Answer · 2010-05-19 00:58:13Z

15

You can do something like this:

$("#editRecord").validate({
    rules: {
        'Details1': {
            required: function() {
                return $('input[name=Question1]').val() == 'yes';
            }
        }
        'Details2': {
            required: function() {
                return $('input[name=Question2]').val() == 'yes';
            }
        }
    }
});

answered May 19, 2010 at 0:58

PetersenDidIt

25.6k3 gold badges69 silver badges72 bronze badges

3 Comments

Nick Craver Over a year ago

Javascript is case sensitive, especially on strings ;)

Steve Kemp Over a year ago

OK thanks that's great I've got it working now. This is really a bonus question but I would also like to make the label for the textarea input field change colour to red once the user clicks Yes to indicate that this is now a required field. Clicking No would remain black. So if the user clicks Yes for Question 1 the: <strong>Details:</strong> for Question 1 would then change colour to red. Any ideas?

Scott Flack Over a year ago

You could just do that using $(element).on('change' function () { //change border here }); Also thanks to this answer - found it to be a simpler implementation then the accepted answer, for my problem which was slightly different.

whatshisname · Accepted Answer · 2015-11-03 19:10:51Z

0

In response to Nick Craver's suggested response above, I found the correct syntax to be:

class="validate[required][name=Question1][value=Yes]:checked"

instead of what he posted.

Thanks for putting me on the right track, though!

answered Nov 3, 2015 at 19:10

whatshisname

1511 silver badge6 bronze badges

Collectives™ on Stack Overflow

Conditional Validation using JQuery Validation Plugin

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest