Conditional Validation using JQuery Validation Plugin_问答_开发者

Conditional Validation using JQuery Validation Plugin

开发者 https://www.devze.com 2022-12-30 14:33 出处：网络

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 answe

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="Question开发者_开发知识库2" 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>

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

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';
            }
        }
    }
});

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!