Question

136

Manually trigger HTML validation on button click

rated 0 times [ 138] [ 2] / answers: 1 / hits: 28635 / 11 Years ago, thu, september 5, 2013, 12:00:00

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/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kenyamelinad

Add To Favorites

Follow

Total Points: 339

Total Questions: 85

Total Answers: 116

Location: Marshall Islands

Member since Sun, Aug 29, 2021

3 Years ago

kenyamelinad questions

1 Error occurred prerendering page /. Deployment Error Vercel | Next.js

Sun, Jan 16, 22, 00:00, 2 Years ago

1 React JS Unexpected reserved word 'await'

Wed, Sep 8, 21, 00:00, 3 Years ago

1 How to use Leaflet Routing Machine with React-Leaflet 3?

Sun, May 23, 21, 00:00, 3 Years ago

1 Material UI (Scrollspy) - React - use tabs to move through list and auto scroll to index

Sun, Sep 20, 20, 00:00, 4 Years ago

1 Vue.js error app' is assigned a value but never used no-unused-vars

Wed, Apr 15, 20, 00:00, 4 Years ago

View All

answered 11 Years ago ryleymarkelb · Accepted Answer

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