Ben Ben - 1 year ago 77
Ajax Question

Submit form via AJAX but keep client side validation

In my HTML code I have required fields and regular expression pattern checking using HTML5 attributes. I want to submit my data to my server via AJAX but I have to use e.preventDefault();

Using that, disables all the HTML5 attributes like "required" and "type=email" and the built in HTML5 client side check. Basically the user can just submit an empty form.

Is there a way to make HTML5 first check if the attributes i specified are met, then e.preventDefault from submitting so i can manually submit via AJAX?

function(e) {
//Prevents form from submitting right away:

// Allows or keeps halting form submission process; returns true or false.

function validationForm() {


<script src=""></script>
<section id="lastname">
<p>Last Name</p>
<input type="text" name="lastname" placeholder="Last Name" pattern="[a-zA-Z]+" title="Letters Only" required></input>
<input id="input_submit" type="submit" value="submit">

Answer Source

If you instead prevent the form submit from happening (instead of the button click), you will get the behaviour you want.

$("form#your_form").on("submit", function(e) {

So in the above example, the alert only happens if the form is valid.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download