Add validation to HTML5 required fields

Question

I am using HTML5's required attribute on my input elements and select boxes and PHP for validation.

How can I show an alert if the required fields are not filled in? I tried using onsubmit() but the form is processed anyway and no alert is shown.

Please show us your code, ideally in a jsFiddle. We can hardly debug code if we don't see it. — Laurent S.
– Laurent S., Commented Apr 9, 2014 at 7:15

Alex · Accepted Answer · 2014-04-09 07:18:22Z

1

If the user's browser supports html5, he cant submit the form if not all the required fields have been written into.

Generally, you can prevent a form from submitting in jQuery like so:

$('#yourformselector').submit(function(event) {
    $(this).find('[required="required"]').each(function() {
        if (!$(this).val().length) {
            event.preventDefault();
            return false;
        }
    });
});

answered Apr 9, 2014 at 7:18

Alex

10.3k6 gold badges36 silver badges62 bronze badges

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

Comments

heinkasner · Accepted Answer · 2014-04-09 08:15:28Z

0

If you are using a modern/newer web browser, your default browser alerts should automatically display.

Or try:

    $(document).ready(function() {
    $('form').submit(function() {
        var incomplete = $('form :input').filter(function() {
                             return $(this).val() == '';
                         });
        //if incomplete contains any elements, the form has not been filled 
        if(incomplete.length) {
            alert('please fill out the form');
            //to prevent submission of the form
            return false;
        }
     });
});

answered Apr 9, 2014 at 8:15

heinkasner

4356 silver badges18 bronze badges

1 Comment

Aksh Over a year ago

i am only want to check that element which contain only 'required' attribute.

Alexandre Bastos · Accepted Answer · 2017-08-28 19:25:48Z

0

You may use checkValidity(), it will try to validate with attributes like pattern, min, max, required, etc. Follow this link to go deeper here

function myFunction() {
    var inpObj = document.getElementById("id1");
    if (inpObj.checkValidity() == false) {
        alert('invalid input')
    } else {
        alert('valid input')
    } 
}

<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>

answered Aug 28, 2017 at 19:25

Alexandre Bastos

12 bronze badges

Collectives™ on Stack Overflow

Add validation to HTML5 required fields

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related