jqueryvalidationjquery-form-validator

jQuery validate: call a function after form validate


I'm trying to call a function that will save my form.

Here's my code:

$('#save-form-datas').validate({
    rules: {
        ROO_Number: {
            required: true,
            minlength: 1,
            maxlength: 4
        }
    },
    submitHandler: function(form) {
        var formData = new FormData(form);
        saveFormDatas(form);
    }
});

But when the code is executed it doesn't work.

Here's the code of the function I want to execute right after the for has been validate:

function saveFormDatas(form) {

    $.ajax({
        type : 'POST',
        data : form.serialize(),
        url  : 'assets/app/php/ajax/rooms_edit.php',
        success: function(responseText){
            var json = $.parseJSON(responseText);
            if(json.type=="success") {
                $('#status-message-saved.hide').removeClass('hide');

                if(json.return_url!="") { 
                    setTimeout(function(){ window.location.href = "app?q=" + json.return_url; }, 1000);
                }
            }
            if(json.type=="error") {
                $('#status-message-error.hide').removeClass('hide');
            }
        }
    });
}

But it doesn't work and simply open a new page like this I've passed the form with $_GET (all my form datas are in the url).

I need to make like this because I have more than 100 forms and can't duplicate my code to save the forms.


Solution

  • Just remove the submitHandler from the validator and add a external function.

    $('#save-form-datas').validate({
     rules: {
        ROO_Number: {
            required: true,
            minlength: 1,
            maxlength: 4
        }
     }
    });
    

    Handle form submit as below.

    $('#save-form-datas').submit(function(event){
        event.preventDefault();
        if($('#save-form-datas').valid()){
            var form = $('#save-form-datas')[0];
            var formData = new FormData(form);
            saveFormDatas(form);
        }
    });
    

    Or else you can just add "return false" as below...(This will prevent the default form submit)

    $('#save-form-datas').validate({
     rules: {
        ROO_Number: {
            required: true,
            minlength: 1,
            maxlength: 4
        }
     },
     submitHandler: function(form) {
        var formData = new FormData(form);
        saveFormDatas(form);
        return false;
     }
    });