How after submit form, e.preventDefault(), run some script and continue with html5 validation?

Question

I have classic HTML form. After click on submit button i want run my script so i have in jquery:

$(document).on('click', '.myForm #btnSubmit', function(e) {

    e.preventDefault();

    // some scripts

so before send form i have e.preventDefault();, after this runs my scripts.... And after my scripts are done, i want continue html5 validation like required field etc...

How i can continue? I was tried click() but it is nonsense because it is loop - again have e.preventDefault(); and so on...

In short: Client click on submit button, i need run some my javascript scripts and if results are ok, then i need continue with standart behaviour - html5 validation...

Pete · Answer 1 · 2020-01-14T13:53:08.410

1

You can use the html5 checkValidity() to check html5 form validity:

var $form = $('.myForm');

$form.on('click', '#btnSubmit', function(e) {
  e.preventDefault();

  // your scripts

  if ($form[0].checkValidity()) {
    $form.submit();
  }
});

Come to think of it, you don't even need the e.preventDefault() as your form won't submit if validation fails anyway so if you can just run your scripts and then let the html5 validation submit the form or not

If you only want to run your scrips if your form is valid, then you can use the above function and if and put your scripts inside the if.

edited Jan 14 '20 at 13:53

answered Jan 14 '20 at 13:37

Pete

57,112
28
117
166

There is no working validation... https://jsfiddle.net/LajdakMarek/gf24hp67/5/ – Lajdák Marek Jan 14 '20 at 13:43
Works fine: https://jsfiddle.net/zjt5dho7/1 - you haven't even included the code above and the button actually needs to submit the form if you want it to show the bubble - you can't just have a random button and expect the form to be validated – Pete Jan 14 '20 at 13:45
Sorry my english is not good but we are not understant each other... My script are not about any validation of inputs... That button was out of form deliberately... only for call jquery script... After client click on submit button, i need run some js scripts and after this if are results ok, then continue with html5 validation... thats it... like my own answer... but thank you for your time... – Lajdák Marek Jan 14 '20 at 14:28
that's fine but just to point out - both your buttons are within your form in your answer (therefore the comment below my code in my answer above would be correct - you wouldn't need to prevent the default action of the form as the html 5 validation would do that for you) – Pete Jan 14 '20 at 14:30

score 0 · Answer 2 · answered Jan 14 '20 at 13:16

You can trigger form submit by selecting it with jQuery selector and then calling .submit().

So the whole code would look like this:

$(document).on('click', '.myForm #btnSubmit', function(e) {

    e.preventDefault();

    // your scripts

    $(".myForm").submit();
}

But please note that you using this code you can still submit the form without your scripts, by selecting submit button with TAB and then clicking SPACE for example.

Lajdák Marek · Accepted Answer · 2020-01-14T14:02:49.607

Okay got it!

Create another hidden input type submit and after run own scripts make trigger click() on it...

Code:

HTML:

<form>
    <input type='text' required>
    <input id='submitHidden' style='display: none' type='submit'>
    <input id='btnSubmit' type='submit'>
</form>

JQUERY:

$(document).on('click', '.myForm #btnSubmit', function(e) {

    e.preventDefault();

    // some scripts

    // if some script allow continue with html5 validation then:

    $("#submitHidden).click();

jsFiddle

How after submit form, e.preventDefault(), run some script and continue with html5 validation?

3 Answers3