HTML 5 Validation on button Click

Question

I have the below form:

<form>
  <input type="name" required/>
  <input type="button" value="Send"/>
 </form>

The above form is in Bootstrap Modal Box On Send button; I want to change the HTML 5 required validation.

I don't want the button type to be submitted. As page gets refreshed and the modal box is closed down ??

What can I do to validate HTML 5 without clicking on sumbit button?

The HTML5 form validation is meant to take place on submit. If you want a validation that could be triggered at whatever point (which does not make sense to me, because that could disturb a use while filling the form) you have to use a good ol' JS form validator. Ask yourself at first, “why would you validate some form input, if you don't want to submit it?” — feeela, Oct 05 '15 at 12:16
@Dhawal - You can achieve it by various means; see my JS Fiddle below. — Adesh M, Oct 05 '15 at 13:56
@feela This misunderstands the meaning of forms, validations, and submission. There are plenty of ways to use HTML5 form validation outside of a classic form workflow. There's an entire API designed to support doing that. — , Oct 05 '15 at 14:22
Possible duplicate of [How to force a html5 form validation without submitting it via jQuery](http://stackoverflow.com/questions/11866910/how-to-force-a-html5-form-validation-without-submitting-it-via-jquery) — , Oct 05 '15 at 14:25
thanks torazaburo... i have used same script as you have given in the above link.. — Dhawal Mhatre, Oct 06 '15 at 11:33

score 1 · Accepted Answer · answered Oct 05 '15 at 12:23

1

Thanks all for your replies..

I have done it successfully... with below script

  $('button.saveChange').click(function(){
    if (!$('#vehicleForm')[0].checkValidity()) {
        $('#vehicleForm').find('input[type="submit"]').click();
        return false;
    }
   });

answered Oct 05 '15 at 12:23

Dhawal Mhatre

435
2
8
28

hello, i have used the gone through above link which you provided, it has same solutions and its working properly as i need.. – Dhawal Mhatre Oct 06 '15 at 11:35

score 0 · Answer 2 · answered Oct 05 '15 at 13:53

0

You can use e.preventDefault() to override default form action instead of using return false. Can be used with combination of form event submit (or button event click)

e.preventDefault();

See My JS Fiddle

answered Oct 05 '15 at 13:53

Adesh M

436
5
10

HTML 5 Validation on button Click

2 Answers2