Reputation: 17019
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?
EDIT:
I'm just looking for the best way to approach this. I want to validate onSubmit
for a quick response to the user and then I want to actually submit the form that way I know where the data is going (eg register.php will register a user).
That's why I'm not doing a combined action/validate script because I wouldn't know which form I'm submitting. I probably need to rearrange the way I'm doing this.
Upvotes: 1
Views: 10357
Reputation: 1622
See here for instructions on accessing the REQUEST URI of the request within a php script.
If there is a common validation that you are doing for every form submitted, you can move that into a separate php file and import it into all files that will use the function. That function will then be available inside the script you imported it into.
See here for instructions on including files in php.
Then you can add custom validation to each individual script. You will more than likely need custom validation for some of your forms, someday.
etc...
$('#formId').on('submit', function (event) {
event.preventDefault();
$.ajax({
url : "ajax/user/register.php",
type : "POST",
data : $(this).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');
});
}
}
});
});
Upvotes: 0
Reputation: 14435
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/
Upvotes: 1
Reputation: 708
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.
Upvotes: 0
Reputation: 175
This should work: Unbind the event before re-submitting.
Instead of
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();
}
}
});
}
Try
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).unbind('submit').submit();
}
}
});
}
Upvotes: 0
Reputation: 75133
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
function submitForm() {
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?
Upvotes: 0
Reputation: 23
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);"
Upvotes: 0