Jquery Field / Form Validation

Question

I am needing to perform two sets of validation with jquery. First validation occurs to ensure the user selects an option from the drop down. If the user selects the option 'Approved' then another set of validation occurs. This validation works correctly:

    $(document).ready(function () {
        $("form[name=usagAddSanction]").validate({
            rules: {
                status: {
                    required: true
                }
            },
            messages: {
                status: {
                    required: "You must select status"
                }
        }
    });

This validation is supposed to occur when the select is changed to 'Approved'. The jquery adds the SPAN correctly but does not validate the form field.

    $("select[name=status]").change(function () {
        if ($(this).val() == 'Approved') {
            $(".required").show();
            $("form[name=usagAddSanction]").validate({
                rules: {
                    siteName: {
                    required: true
                    }
                },
                messages: {
                    siteName: {
                    required: "Please enter name"
                    }
                }
            });
        }else {
            $(".required").hide();
        }
    });

I am at this point wondering if this is not possible due to the fact that I have validated the form once already. I am hoping someone with more experience can provide some guidance. Thanks

Answer 1

Use valid method to trigger the validation, it does validation and returns true/false based on the rules if the form is valid or not. Try this.

$("select[name=status]").change(function () {
    if ($(this).val() == 'Approved') {
        $(".required").show();
        $("form[name=usagAddSanction]").valid();
    }else {
        $(".required").hide();
    }
});