HTML5 form validation for AJAX button submit

Question

I have the following form. I like the new HTML5 form validation and I would prefer to keep it. However. I don't like the way that when the button is pressed it refreshes the page (form submit).

Instead I would prefer to use the button to trigger some AJAX to refresh page elements without refreshing the entire page. However, when I set type="button" what happens is that the HTML5 form validation ceases to trigger when the button is pressed.

How can I use HTML5 form validation, while not triggering propagation of refreshing/submitting the page?

Note that I'm not concerned with the AJAX elements of this problem, just the HTML5 validation issue.

echo "<form>";
echo "<td><input id=\"link_add_title\" type=\"text\" class=\"form-control\" placeholder=\"URL Title\"></td>";
echo "<td><input id=\"link_add_url\" type=\"url\" class=\"form-control\" placeholder=\"Your URL\"></td>";
echo "<td><input id=\"link_add_budget\" type=\"number\" step=\"any\" class=\"form-control\" placeholder=\"Budget\"></td>";
echo "<td><button class=\"btn btn-sm btn-success\"><i class=\"fa fa-check\"></i> Add</button></td>";
echo "</form>";

@adeneo - I'm using chrome. Don't know how other browsers have implemented the HTML5 standards but if it doesn't work on chrome I have a bit of a problem :) — Amy Neville
– Amy Neville, Commented Nov 16, 2013 at 16:44
Well, try hitting submit in this fiddle, there's no page reload when the validation kicks in -> jsfiddle.net/Qv2c2/1 — adeneo
– adeneo, Commented Nov 16, 2013 at 16:47
I surely don't get it, if you're trying to avoid the form submit when the form is actually valid, just use preventDefault in the form submit handler ? — adeneo
– adeneo, Commented Nov 16, 2013 at 16:48

Community · Accepted Answer · 2017-05-23 12:17:01Z

14

This way you prevent actual submit, but HTML5 validation triggers:

$('form').submit(function(event){

  event.preventDefault();

});

As Samveen points out, this way should be preferred over listening to the onclick event of the <button>/<input type="submit"> element, because the latter would prevent HTML5 validation in addition to normal form submit - see fiddle.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Nov 16, 2013 at 16:54

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Amy Neville Over a year ago

That works thank you! Obviously I will improve the selectors though so it doesn't apply to all forms :)

Samveen Over a year ago

A small addendum: The usual paradigm is to do form submission on button click event: $('button').click(function(evt){\*AJAX*\}); which needs to change to the above mentioned form submit event: $('form').submit(function(event){\*AJAX*\}); in conjunction with altering the button type back to type="submit"

moonwave99 Over a year ago

@Samveen: with $(...).click(), you prevent HTML5 validation from happening. So please listen to submit only : ))

Samveen Over a year ago

@moonwave99: What you are saying is exactly what I discovered yesterday (the problem that lead me to this answer). All my form related code incorrectly listens to $('button').click(), this unfortunate paradigm being what I learned from searching on Google and SE(see other answer). Thus my comment to point out the gotcha that got me.

Samveen Over a year ago

@moonwave99, Would you the relevant parts of my comment as a note into your answer? It would make a great answer even better :) (something to the effect of not using $('button').click(), and using $('form').submit(...) instead?)

|

Achilles · Accepted Answer · 2013-11-16 16:52:18Z

1

With a submit button try..

html
<input type="submit" class="your-button-class" />

js
$(document).on('click','.your-button-class',function(){
 //your code

 return false;  //this will prevent the page refresh
});

edited Nov 16, 2013 at 16:52

answered Nov 16, 2013 at 16:46

Achilles

1144 silver badges11 bronze badges

2 Comments

Amy Neville Over a year ago

This seems to stop propagation of the form but it also stops the HTML5 validation

Amy Neville Over a year ago

I think this is a browser-specific solution :)

Collectives™ on Stack Overflow

HTML5 form validation for AJAX button submit

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related