Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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;
    }
  });
});
like image 288
Finding Mozart Avatar asked Mar 08 '13 13:03

Finding Mozart


1 Answers

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

like image 126
Derek Henderson Avatar answered Nov 19 '22 21:11

Derek Henderson