Html 5 required validation with ajax without refreshing the page.

Sachin Singh

6y1.3kAJAX

I know to use Html 5 validation with ajax we generally use submit event handler and not button with preventDefault click like below

"post" id="subsForm">
class="input-group">
"email" required>
"submit">

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

event.preventDefault();

$.ajax(){

// submit data to controller

}

});

Ok , thats a good solution to force Html 5 validation to work without submitting the form but it violates the definition of Ajax and causes to refresh the page when page is submitted with satisfied validations.

Is there any solution till date to use html 5 validations without page refresh.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Darshan Shah6y ago
We should use normal button instead of Submit to work HTML 5 Validation.
<form>
  <label for="name">Please enter your name (mandatory)label>
  <input id="name"  required>
  <button>Submitbutton>
form>
input:invalid {
  border: 1px solid red;
}

input:invalid:required {
  background-image: background-color: #eee;
}

input:valid {
  border: 1px solid green;
}
Laxmidhar Sahoo6y ago
Hi

Try the bellow code may solve

$(function() {
$("#submit-btn").click(function() {
// validate and process form here
});
});
Varun Setia6y ago
1. $(document).ready(function(){
2. $("#form").submit(function(e){
3. e.preventDefault();
4. //....
5. });
6. });
The e.preventDefault() prevents the default behaviour . If won't matter if we submit, click or do any other action. If we use submit we can have all the validations work correctly like type="email", required, etc. I don't think this will cause page to refresh :)