Geek Answers Handbook

Html5 validation on invalid event listener fails

I have a form in my html with the following markup

<form>
    <input type="text" name="fname" required>
    <input type="submit" value="Submit">
</form>

I also have 2 script tags, one for jquery and another for my javascript, which I call validate.js

<script src="jquery-2.1.4.min.js"></script>
<script src="validate.js"></script></body>

When I paste the following code into validate.js file and send invalid data. Page warnings are "invalid" as expected.

$("form input").on("invalid", function() {
     alert("invalid");
});

When I use this code in validate.js, instead, when I press enter, the page behaves again as expected at this time, warning 'click'.

$("body").on("click", "form input", function(){alert("click");});

However, the following code does not work. When invalid data is sent, the invalid event handler does not fire, and "invalid" is not warned, as it should be.

$("body").on("invalid", "form input", function(){alert("invalid");});

, ajax, , . , ?

+4
1

$("body").on("invalid", "form input", function(){alert("invalid");}); , , , .

$("body").on("click", "form input", function(){alert("invalid");}); , , , .

.

+2

More articles:


All Articles