Search code examples
jqueryjquery-validatejquery-forms-plugin

jquery validation and jquery ajax plugin form submition


i have a form that should submit with ajax request. i use jquery form plugin to make ajax call. everything is Ok. but when i validate this form with jquery validation plugin, form submit works, even form is invalid. this is my code:

$.validator.addMethod('le', function (value, element, param) {
    return this.optional(element) || parseInt(value) >= parseInt($(param).val());
}, 'Invalid value');
$('#educational_records_form').validate({
    errorElement: "h6",
    rules: {
        edu_cert_start_year: {
            required: true,
            number: true

        },
        edu_cert_end_year: {
            required: true,
            number: true,
            le: '[name="edu_cert_start_year"]'
        }
    },
    messages: {
        edu_cert_end_year: {
            le: 'Must be less than bid price.'
        }
    },
    submitHandler:function (form) {
        $(form).ajaxSubmit();
    }
});

and my form:

$('#educational_records_form').submit(function () {
    if ($('[name="edu_still_student"]').prop('checked')) {
        $('[name="edu_cert_end_month"]').append('<option value="continued"></option>');
        $('[name="edu_cert_end_month"]').val('continued');
        $('[name="edu_cert_end_year"]').append('<option value="continued"></option>');
        $('[name="edu_cert_end_year"]').val('continued');
    }

    $(this).ajaxSubmit({
        success: function () {

            UIkit.modal('#new_edu_course').hide();
            $('#educational_records_form').resetForm();
            $('#edu_cert_end_box').removeClass('uk-hidden');
            $('#edu_cert_end_box').addClass('uk-animation-fade');
            $('#edu_cert_start_box').removeClass('uk-width-1-1@l');
            $('#edu_cert_start_box').addClass('uk-width-1-2@l');

        },
        fail: function () {
            alert('fail');
        }
    });
    return false;
});

sorry for weak english. i works on this problem for 2 weeks! but i can't solve it. thanks a lot.


Solution

  • try this

    $('#educational_records_form').submit(function (e) {
     e.preventDefault();
    if($("#educational_records_form").valid()){
    if ($('[name="edu_still_student"]').prop('checked')) {
        $('[name="edu_c`enter code here`ert_end_month"]').append('<option value="continued"></option>');
        $('[name="edu_cert_end_month"]').val('continued');
        $('[name="edu_cert_end_year"]').append('<option value="continued"></option>');
        $('[name="edu_cert_end_year"]').val('continued');
    }
    
    $(this).ajaxSubmit({
        success: function () {
    
            UIkit.modal('#new_edu_course').hide();
            $('#educational_records_form').resetForm();
            $('#edu_cert_end_box').removeClass('uk-hidden');
            $('#edu_cert_end_box').addClass('uk-animation-fade');
            $('#edu_cert_start_box').removeClass('uk-width-1-1@l');
            $('#edu_cert_start_box').addClass('uk-width-1-2@l');
    
        },
        fail: function () {
            alert('fail');
        }
    });
    }
    });