Home/ Questions/Q 785771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T20:55:57+00:00

I have a simple html form that I’ve added validation to using the JQuery

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0