Submitting a form when using an onSubmit

Question

My form onSubmit is calling:

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

validate() is as follows:

function validate(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();
            }
        }
    });
}

When I have 0 errors it's trying to submit the form but I'm getting an infinite loop. I realize it's happening because my onSubmit calls the function again. How do I actually submit the form when I'm ready? What is the proper way to approach this?

Vincent Ramdhanie · Answer 1 · 2013-03-23T17:34:45.390

1

Your validate function should return either true or false depending on errors.

  onsubmit = "return validate(this)"

  function validate(obj){
     ...
     if(data['error_count'] >= 1) {
            $.each(data, function(i, item) {
                $('#' + i).addClass('form_errors');
            });
            return false; //stop submitting
        } else {
            return true;//continue submitting
        }
  }

Although, since you are using jquery:

     $("#formid").submit(function(){
           //your validation code
     });

may be better.

Check out this page for more details. There is a good example.

edited Mar 23 '13 at 17:34

answered Mar 23 '13 at 17:28

Vincent Ramdhanie

102,349
23
137
192

The OP uses AJAX to validate the form, so this doesn't help. – a better oliver Mar 23 '13 at 17:39
It doesn't seem to be working for me. Any idea why? – SeanWM Mar 23 '13 at 17:44
In that case move the validation to the button click and on validation success then submit form. – Vincent Ramdhanie Mar 23 '13 at 17:50
I was thinking about that but I want the user to be able to hit enter to submit the form. – SeanWM Mar 23 '13 at 17:56
the return is undefined – SeanWM Mar 23 '13 at 18:28

score 0 · Answer 2 · answered Mar 23 '13 at 17:51

You are already submitting the form for validation.

On } else { you can't submit it again, as you noticed. You should call a function to submit it to whatever_process_the_validated_data.php

Though I'd suggest having the same .php to validate and process data - a class or function to each. That way you can:

$('.forms_that_need_validation').submit(function() {
$.ajax({
    url : "ajax/data_validation_and_processing.php",
    type : "POST",
    data : $(this).serialize(),
    success : function(data) {
        $(this + ' :input.form_errors').removeClass('form_errors')
        data = $.parseJSON(data);
        if(data['error_count'] >= 1) {
            $.each(data, function(i, item) {
                $('#' + i).addClass('form_errors');
            });
        } else {
            location.reload();
        }
    }
});
return false;
});

What happens is, if the data fails to be validated, it returns an error - you should code you .php in order not to process the data if it's not validated. Otherwise, the data was validated and processed already, then it just reloads the page.

Submitting a form when using an onSubmit

2 Answers2