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
– feeela, Commented Oct 5, 2015 at 12:16
@Dhawal - You can achieve it by various means; see my JS Fiddle below. — Adesh M
– Adesh M, Commented Oct 5, 2015 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. — user663031
– user663031, Commented Oct 5, 2015 at 14:22
Possible duplicate of How to force a html5 form validation without submitting it via jQuery — user663031
– user663031, Commented Oct 5, 2015 at 14:25
thanks torazaburo... i have used same script as you have given in the above link.. — Dhawal Mhatre
– Dhawal Mhatre, Commented Oct 6, 2015 at 11:33

Dhawal Mhatre · Accepted Answer · 2015-10-05 12:23:47Z

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 5, 2015 at 12:23

Dhawal Mhatre

4352 gold badges9 silver badges28 bronze badges

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

1 Comment

Dhawal Mhatre Over a year ago

hello, i have used the gone through above link which you provided, it has same solutions and its working properly as i need..

Adesh M · Accepted Answer · 2015-10-05 13:53:58Z

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 5, 2015 at 13:53

Adesh M

4445 silver badges10 bronze badges

Collectives™ on Stack Overflow

HTML 5 Validation on button Click

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related