async html5 validation

Question

For some reason html5 validation message is not shown when I'm using an async request.

Here you can see an example.

setTimeout(function() {                
  ...
  //this is not working
  target.setCustomValidity('failed!');                
  ...
}, 1000);

When checkbox is not checked, everything works as expected, but when it is checked, the message is not visible.

Can someone explain what should be done?

Your goal isn't very clear. I've adjusted your code a bit, but I'm sure you mean something else. Can you specify more detailed what you are checked and what the validation function does? jsfiddle.net/E4mPG/14 — user1467267
– user1467267, Commented Mar 22, 2013 at 12:58
When timeout is used, we should see html5 popup message, but it is not shown. — dennis_n
– dennis_n, Commented Mar 26, 2013 at 12:21

Daniel Imms · Accepted Answer · 2013-03-22 13:01:01Z

I figured it out, turns out that the HTML5 validation messages will only popup when a form submit is in progress.

Here is the process behind my solution (when timeout is checked):

Submits the form
Sets the forceValidation flag
Sets the timeout function
When the timeout function is called, resubmit the form
If the forceValidation flag is set, show the validation message

Basically perform two submits, the first one triggered by the button, and the second triggered when the timeout function is called.

jsFiddle

var lbl = $("#lbl");
var target = $("#id")[0];

var forceValidation = false;

$("form").submit(function(){
    return false;
});

$("button").click(function (){                
    var useTimeout = $("#chx").is(":checked");         

    lbl.text("processing...");
    lbl.removeClass("failed");
    target.setCustomValidity('');    
    showValidity();     

    if (forceValidation) {
        forceValidation = false;
        lbl.text("invalid!");
        lbl.addClass("failed");
        target.setCustomValidity('failed!');
        showValidity();
    } else if (useTimeout) {
        setTimeout(function () {
            forceValidation = true;
            $("button").click();
        }, 1000);
    } else {
        lbl.text("invalid without timeout!");
        lbl.addClass("failed");
        target.setCustomValidity('failed!');
        showValidity();            
    }
});

function showValidity() {                    
    $("#lbl2").text(target.checkValidity());
};

I am running on Chrome version 25.0.1364.172 m.

charlesroelli · Accepted Answer · 2024-02-29 08:05:26Z

1

HTMLInputElement.reportValidity, which did not exist at the time this question was first answered, also works for this use case.

function showValidity() {                    
    $("#lbl2").text(target.checkValidity());
    target.reportValidity();
};

answered Feb 29, 2024 at 8:05

charlesroelli

5065 silver badges10 bronze badges

Collectives™ on Stack Overflow

async html5 validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related