CODEWITHSUNDEEP
javascripthtmljqueryvalidationconstraint-validation-api
Imran Rashid
Imran Rashid

Reputation: 3502

Manually trigger HTML validation on button click

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/

Upvotes: 17

Views: 30189

Answers (5)

Brian Davis
Brian Davis

Reputation: 817

Try

reportValidity()

So you'd have

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

Upvotes: 35

Jake Hunter
Jake Hunter

Reputation: 141

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

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

Upvotes: -1

Talha Habib
Talha Habib

Reputation: 332

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;
}

});

Upvotes: 4

Mr.TK
Mr.TK

Reputation: 1836

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! :)

Upvotes: 6

Elmer
Elmer

Reputation: 259

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
}
});

Upvotes: 0

Related Questions