Show form default Validation Status Programmatically

Question

I want to submit a form using ajax. So I am not using the type=submit. I am using a onClick event on a link(<a>) to send the form data using ajax. I also want to take advantage of HTML5 form validation capabilities.
So before sending the data, I used the function .checkValidity to check the validity of the form.
If it returns true then I send the data. But when it return false I want to show user that the form is invalid using HTML5 default notifying scheme. But I don't know how to trigger that.

Is there is any way to show the validation of the form programmatically.

One way to do is trigger the submit event if checkValidity return false. But this will refresh the page. I don't want to change the state of the page.

checkValidity only checks validity and inform the program. It doesn't inform the user interactively.

I have the same problem. MDN docs says that the user notification on the fields will only be shown if you do a ´checkValidity´ on the original submit event! I tried it and it works if you ´return false´! Even if you ´preventDefault´. Since in my own script I use ajax as well on ´<a>´ as on ´type=submit´, I'm not sure what to do..except splitting it up :-( — e-motiv
– e-motiv, Commented Dec 25, 2018 at 13:01

Logemann · Accepted Answer · 2012-12-14 16:28:28Z

1

We have exactly the same problem and we tried very different things and a lot of them were hacks like pseudo submits and event.preventDefault() approaches. All in all i must say that HTML5 validation is nice in general but really bad in practice because its not possible to display backend validation errors the same way as frontend validation errors.

And only god knows why the HTML5 folks didnt thought about a simple API where we can trigger the validation like this element.triggerValidationMessage('my message');

answered Dec 14, 2012 at 16:28

Logemann

2,98340 silver badges56 bronze badges

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

Comments

e-motiv · Accepted Answer · 2018-12-30 19:20:56Z

You can do it if you let your form have a submit button and return false! And you cán do it in the same event handler as the non-submits! So, first test if you are part of a form and if so, make it check Validity and never return true (even if valid)!

$('.ajx')   
    .on("submit click", function(e) {

        var $this           = $(this)

        //Force native form validating and notification
        form = $this.closest('form')[0]
        if (form) {
            //Follow through with form submit (element must be of submit type!)
            if(!form.checkValidity()) {
                //don't ask me!
                sleep(3000);
                return false
            }
        }           

        //only preventDEfault AFTER possible form element click
        e.preventDefault()

        //...your project further ajax code
        //Makes sure your form never submits
        if (e.type=='submit') return false
}

Small downside: You have to do this on the submit button, but it's always possible to change your <a> into type=submit. You don't have to change the non form <a>'s though!

Collectives™ on Stack Overflow

Show form default Validation Status Programmatically

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related