Dual submission of form creating issue with validation

Question

my forms have dual submission.

Step 1. submission on my defined url with ajax

Step 2. allow form to behave as its default behavior.

Issue:

I am not providing any validation with my script. i am not using any plugin like jquery validate.

when submitting the form, the jquery validation is working (Which is if form already heve) but just after the ajax complete it is allow to submit the form.

That should not happens if validation is there.

I am providing this my script to my client to get the submitted form info in my platform.

Thats why i don't know which validation client will use or if they will not use or they will use any plugin for validation.

i just want to stop the submission if there is validation error..

I know there is issue 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;
        }
    });
});

more info :

its a double submission script..means first it will submit the form on one url which is not in form action then it will allow form to do its default behaviors like Ist step to save the info using ajax on my url and then in 2nd step if form have action to submit the form then do this or if form has ajax submission then do this or etc other form behavior on submit

Update :

There is 2 person

1. I am
2. My client

I am providing my form submission script to my client they have their own form to and own jquery/javascript.

So now i am giving them my script and asking to put it on your form with my way and once they will put , i will also get the detail of form after submit.

But I AM NOT PROVIDING ANY SCRIPT FOR VALIDATION..

they have own validation there could be any plugin or custom jquery/javascript.

My issue :

How can i stop form submission if there is validation from their form's own jQuery/Javascript ?

Answer 1

Inside Ajax Success function check again for form valid

if($("form[data-track=MySubmit]").valid()){
    // the form is valid, do something
    $("form[data-track=MySubmit]").off("submit");
    $("form[data-track=MySubmit]").trigger( "submit" );
} else{
    // the form is invalid
}

Answer 2

You can 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();
});

Answer 3

You can use jquery validate() method for this. we can pass submitHandler function which handles how the form submit is handled after form is found to be free of client side validations.

submitHandler (default: native form submit)

Type: Function() Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it is validated.

Example: Submits the 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');
            }
        });
    }
});

Answer 4

try this

for validation 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();
        }
    });
});

Answer 5

You can try return false and event.preventDefault both at the same time + You can change the behavior of code when the 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;
    }
});

Answer 6

From what I understand, you want to submit your form with AJAX to url, where the validation happens and if it returns successfully, submit it a 2nd time to its default action.

If this is the case, then your code almost works, but you need to do two things:

1. Put event.preventDefault(); in your submit handler to prevent at the beginning the default action of the form, because we want us to trigger it only after AJAX returns successfully.
2. If AJAX returns successfully and you see that your form is not submitted a 2nd time, make sure that your form does not have a submit button named "submit", because that would hide the default submit action and $("form[data-track=MySubmit]").trigger( "submit" ); would not work! Rename your submit button to "submitBtn" or whatever.

BTW, you are missing a comma after data: formInputData

Answer 7

Have a hidden button with "default" submit. Once you are done with your processing ajax using jQuery, invoke the click event on the button.