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, Nov 16 '13 at 16:44
Can you give us a [JSFiddle](http://jsfiddle.net) showing your form? — Robbie Wxyz, Nov 16 '13 at 16:45
Well, try hitting submit in this fiddle, there's no page reload when the validation kicks in -> http://jsfiddle.net/Qv2c2/1/ — adeneo, Nov 16 '13 at 16:47
See http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form-without-page-refresh-using-jquery/ — Tushar Gupta - curioustushar, Nov 16 '13 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, Nov 16 '13 at 16:48
Don't `echo`HTML in PHP, write it raw please - that's the main purpose of the language. — moonwave99, Nov 16 '13 at 16:52
@moonwave99 I echo because I am generating it dynamically using php and also because it comes out minimised which reduces download time — Amy Neville, Nov 16 '13 at 16:53
@adeneo I take your point though I will post a jsfiddle in future when starting a question — Amy Neville, Nov 16 '13 at 16:58

score 14 · Accepted Answer · edited May 23 '17 at 12:17

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 '17 at 12:17

Community

1
1

answered Nov 16 '13 at 16:54

moonwave99

21,957
3
43
64

That works thank you! Obviously I will improve the selectors though so it doesn't apply to all forms :) – Amy Neville Nov 16 '13 at 16:55
thanks for this answer! i was going crazy over jquery Ajax html5 form validation not triggering when submitting form, but triggering after the form was submitted. – Rahul Patwa Mar 18 '14 at 23:40
1

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"` – Samveen Oct 07 '15 at 11:01
2

@Samveen: with `$(...).click()`, [you prevent HTML5 validation from happening](http://jsfiddle.net/ozrjbLwo/). So please listen to `submit` only : )) – moonwave99 Oct 07 '15 at 16:47
1

@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](http://stackoverflow.com/a/20021021/1353267)). Thus my comment to point out the `gotcha` that got me. – Samveen Oct 08 '15 at 04:13
@Samveen oh sorry, I understood the other way around! Thank you then ^^ – moonwave99 Oct 08 '15 at 14:26
1

@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?) – Samveen Oct 12 '15 at 06:49
@Samveen sure, I just did! – moonwave99 Oct 12 '15 at 09:28
I have problem with validation reset using html5 but it is not working using reset(). you can check using firefox... there is after submit border not cleared. `http://jsfiddle.net/KDkvE/` i have trying to ask new question but its band dont know why – bharat Feb 08 '17 at 13:58

Achilles · Answer 2 · 2013-11-16T16:52:18.133

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 '13 at 16:52

answered Nov 16 '13 at 16:46

Achilles

114
4
11

This seems to stop propagation of the form but it also stops the HTML5 validation – Amy Neville Nov 16 '13 at 16:52
I think this is a browser-specific solution :) – Amy Neville Nov 16 '13 at 16:56

HTML5 form validation for AJAX button submit

2 Answers2

Linked