Duplicate form creation problem with validation
my forms have double subordination.
Step 1: Submitting to my specific url with ajax
Step 2. Allow the form to behave as default.
Question:
I am not providing any validations with the script. I am not using any plugin like jquery validation.
when the form is submitted, the jquery validation is validated (which is if the form is already there), but right after the ajax completes, allow the form to submit.
This shouldn't happen if validation exists.
I provide this script of mine to my client to get the submitted form information on my platform.
This is why I don't know which validator client will be using, or if they won't, or they will use any validation plugin.
I just want to stop submitting if there is a validation error.
I know there is a problem with
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;
Script part:
$("form[data-track=MySubmit]").on("submit", function(event) {
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData
dataType: 'json',
success: function(responce) {
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;
}
});
});
Additional Information:
its a double submission script .. means it will first submit the form to one url that is not in the form action then it will let the form do its default behavior like the I-th step to save information with ajax on my url -address and then in step 2, if the form has an action to submit the form then do that, or if the form has an ajax submission, do this or some other form of submit behavior
Update:
There are 2 people
- I AM
- My client
I provide my submit form script to my client, they have their own form and native jquery / javascript.
So now I give them my script and ask them to put it in your form with my path, and once they are placed, I will also get the form details after submitting.
But I DO NOT PROVIDE ANY script FOR VALIDATION.
they have their own validation, there could be any plugin or custom jquery / javascript in there.
My problem:
How can I stop the form from submitting if there is a confirmation from their native jQuery / Javascript form?
source to share
You may try
event.preventDefault();
Like this
$("form[data-track=MySubmit]").on("submit", function(event) {
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
crossDomain: true,
data: formInputData
dataType: 'json',
success: function(responce) {
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
}
});
event.preventDefault();
});
source to share
The jquery method can be used for this validate()
. we can pass a submitHandler function that handles the form processing procedure after the form is found without client side validation.
submitHandler (default: native form submit)
Type: Function () Callback to handle the actual submission when the form is valid. Returns the form as the only argument. Replaces default submission. The correct place to submit the form via Ajax after submitting it.
Example: Submits a form via Ajax when valid.
$("#myform").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
}
});
You can try this:
$("form[data-track=MySubmit]").validate({
submitHandler: function(form) {
var formInputData = $(form).serialize();
//the default form submit behaviour
$(form).submit();
//form submit via ajax on custom url
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData
dataType: 'json',
success: function(response) {
console.log('form is submitted');
}
});
}
});
source to share
try it
to check you can use JQuery Validation Engine Plugin here: https://github.com/posabsolute/jQuery-Validation-Engine
$("form[data-track=MySubmit]").submit(function(event) {
event.preventDefault(); /////////added
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData, //////missing comma
dataType: 'json',
success: function(responce) {
$("form[data-track=MySubmit]").submit();
}
});
});
source to share
You can try returning false and event.preventDefault at the same time. You can change the behavior of the code when forms return true.
dataCheck = false;
$("form[data-track=MySubmit]").on("submit", function(event) {
if(dataCheck === false)
{
event.preventDefault();
var formInputData = $(this).serialize();
$.ajax({
url: "/insertdata",
type: "post",
data: formInputData,
dataType: 'json',
success: function(responce) {
dataCheck = true;
$("form[data-track=MySubmit]").off("submit");
$("form[data-track=MySubmit]").trigger( "submit" );
return true;
}
});
return false;
}
});
source to share
From what I understand, you want to submit your form using AJAX to the url where validation is performed, and if it returns successfully, submit it a second time by default.
If so, then your code almost works, but you need to do two things:
- Put
event.preventDefault();
in a submit handler to prevent the default action of the form first, because we only want to trigger it after a successful AJAX return. - If the AJAX returns successfully and you see that your form is not submitting a second time, make sure your form does not have a submit button named "submit" as this will hide the default submit action and
$("form[data-track=MySubmit]").trigger( "submit" );
will not work! Rename the submit button to "submitBtn" or whatever.
By the way, you are missing the comma after data: formInputData
source to share