jQuery validate - if an option is selected make the next option not required?

jquery, plugins, validation

Solution

rules: {
    response_type: {
        required: true,
        contact_time: {
            depends: function () {
                return $('#askquestion select[name="response_type"]').val() === 'Phone';
            }
        }
    },

It's in the documentation: http://docs.jquery.com/Plugins/Validation/validate#code

Problem

I'm a complete noob, new to everything basically following tutorials to understand, I'm using the jQuery Form Plugin I'm trying to make a form where "contact type" is chosen, and if "phone" option is chosen, then it makes the "time of contact" required, but if "email" is chosen then it makes the "time of contact" not required. *The form html.* ``` <form id="askquestion" action="questionprocess.php" method="post"> <td><label for="response type">Method of contact:</label></td> <td><select name="response_type"> <option value="" selected="selected">-- Please select --</option> <option value="Phone">Phone</option> <option value="Email">Email</option> </select></td> </tr> <td><label for="response time">Best time to contact:</label></td> <td><select name="contact_time"> <option value="" selected="selected">-- Please select --</option> <option value="morning_noon">Morning to Noon</option> <option value="noon_afternoon">Noon to afternoon</option> <option value="evenings">Evenings</option> </select></td> </tr> </form> ``` jQuery rules: ``` $(function() { // Validate the contact form $('#askquestion').validate({ // Specify what the errors should look like // when they are dynamically added to the form errorElement: "label", wrapper: "td", errorPlacement: function(error, element) { error.insertBefore( element.parent().parent() ); error.wrap("<tr class='error'></tr>"); $("<td></td>").insertBefore(error); }, // Add requirements to each of the fields rules: { response_type: { required:true, }, contact_time: { required:true, }, ``` Update. This is how the validate form ends. ``` // Use Ajax to send everything to form processing file submitHandler: function(form) { $("#send").attr("value", "Sending..."); $(form).ajaxSubmit({ success: function(responseText, statusText, xhr, $form) { $(form).slideUp("fast"); $("#response").html(responseText).hide().slideDown("fast"); } }); return false; } }); }); ```

Original source