Manually trigger HTML validation on button click

Question

I am trying to handle form validation on button click. It is validating the form but not showing error.

can anyone help me in this?

<form id="the-form" action="#">
    <input type="text" required="required" placeholder="Required text" />
    <input type="email" required="required" placeholder="email" />
    <button id="btn" type="button">Submit</button>
</form>

JavaScript:

$("#btn").on("click", function(){
    if($("#the-form")[0].checkValidity())
    {
        alert('validated');
    }
    else
    {
        //show errors
        return false;
    }
});

http://jsfiddle.net/5ycZz/

Brian Davis · Accepted Answer · 2017-07-19 20:50:39Z

35

Try

reportValidity()

So you'd have

$("#btn").on("click", function(){
    if($("#the-form")[0].checkValidity()) {
        alert('validated');
    }
    else {
        $("#the-form")[0].reportValidity();
    }
});

answered Jul 19, 2017 at 20:50

Brian Davis

8171 gold badge13 silver badges16 bronze badges

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

1 Comment

WayFarer Over a year ago

perfect! developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/…

Mr.TK · Accepted Answer · 2014-07-31 07:52:02Z

6

I've achieved this by doing steps below:

1) I'm having form:

<form>
    <textarea required></textarea>
    <input type="submit" style="display:none;"/>
</form>

<a>Some other button to trigger event</a>

2) Now we have to check if the form is filled correctly:

//this is <a> click event:
if (!$('form')[0].checkValidity()) {
    $('form').find('input[type="submit"]').click();
    return false;
}

This will trigger form sending but won't send because there are errors ;)

It appears that html5 validation errors are displayed on input[type="submit"] click :)

Hope will work for You too! :)

answered Jul 31, 2014 at 7:52

Mr.TK

1,8463 gold badges21 silver badges23 bronze badges

1 Comment

Roger Kaplan Over a year ago

I'd prefer to use your strategy, but also create a submit hook and let that do the actual submit work. Calling event.preventDefault() stops the browser from executing the form action. So the <a> click event would be simply $('form').find('input[type="submit"]').click() and $('form').on("submit", function(event) { event.preventDefault(); /* your code here */})

Talha Habib · Accepted Answer · 2014-12-09 07:28:56Z

4

here is the perfect answer

<form id="the-form" action="#">
<input type="text" required="required" placeholder="Required text" />
<input type="email" required="required" placeholder="email" />
<button id="btn" type="submit">Submit</button>

$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
    alert('validated');
}
else
{
  return 0;
}

});

answered Dec 9, 2014 at 7:28

Talha Habib

3323 gold badges4 silver badges18 bronze badges

Comments

Elmer · Accepted Answer · 2013-09-05 10:57:08Z

0

Remove the else statement. (Update)

$("#btn").on("click", function(){
if($("#the-form")[0].checkValidity())
{
    alert('validated'); //will appear if name and email are of valid formats
}
});

edited Sep 5, 2013 at 10:57

answered Sep 5, 2013 at 10:50

Elmer

2591 gold badge3 silver badges12 bronze badges

4 Comments

Imran Rashid Over a year ago

i dont want to show errors in alert it should show error in bootstrap popover which is default behaviour of html5

Elmer Over a year ago

@ImranRashid I see. Remove the 'else' statement: else { //show errors alert('not validated'); }

Imran Rashid Over a year ago

check on jsfiddle.net/5ycZz.. if i change button type to submit it works otherwise it show no msg

Elmer Over a year ago

@ImranRashid The fiddle you gave me has the button type="button" which works. It shows the Validation box.

Jake Hunter · Accepted Answer · 2015-07-08 14:38:05Z

-1

You should be able to simply add onclick="return validateForm()".

<button id="btn" onclick="return validateForm()" type="button">Submit</button>

answered Jul 8, 2015 at 14:38

Jake Hunter

1311 gold badge2 silver badges8 bronze badges

Collectives™ on Stack Overflow

Manually trigger HTML validation on button click

5 Answers 5

1 Comment

1 Comment

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related