Submitting A Form With An Onsubmit

My form onSubmit is calling: onsubmit='validate(this); return false;' validate(); is as follows: function validate(obj) { $.ajax({ url : 'ajax/validate_check.php',

Solution 1:

Remove onsubmit="validate(this); return false;"

And use the following function:

$('form').submit(function(e){
    e.preventDefault();
    var $form = $(this),
        $formId = $form.attr('id'),
        $formName = $form.attr('name');

    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + $formId).serialize(),
        success : function(data) {
            $('#' + $formId + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                document.forms[$formName].submit();
            }
        }
    });
});

Fiddle where you can test with form id or name: http://jsfiddle.net/67rvg/3/

Solution 2:

i'd not issue another submit in your else branch, but return a true value.

in your onsubmit i'd do onsubmit="return validate(this);"

Solution 3:

Don't submit it again using the submit call, as you say, you will be in a loop... just post everything like a submit:

change your $('#' + obj.id).submit(); line by submitForm() and add

functionsubmitForm() {
    var form = $("#my_form"),
        url = form.attr("action"),
        dt = form.serialize();

    $.post(url, dt, function(data) {
       // your form was post'd successfully
    });
}

---

Now that you know how to work, why inventing the well?

Why don'y you use jQuery Validate and the remote validation to do the job for you?

Solution 4:

This should work: Unbind the event before re-submitting.

Instead of

functionvalidate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).submit();
            }
        }
    });
}

Try

functionvalidate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).unbind('submit').submit();
            }
        }
    });
}

Solution 5:

In your block

   } else {
        $('#' + obj.id).submit();
   }

Rather than do an actual form submission use another ajax call to send your data to your forms action endpoint:

} else {

    $.ajax({
        url : obj.action
        ,type : obj.method
        ,data : $(obj).serialize()
        ,success : function() {
            // show success message/close window/ etc
        }
        , error: function() {
            // show error saving form message
        }
    });
}

This way you'll be in a better position to capture the results if something goes wrong with the form submission.