Html5 validation error message without submitting form

Question

I am developing an application in which I use HTML5 fields in my form. I want to trigger a html5 field check when a button is clicked for this purpose. I wrote this code

 <input type="button" id="btnContactSubmit" class="btn btn-success" value="Submit">

  $('#btnContactSubmit').click(function (e) {

            if ($('#aspnetForm')[0].checkValidity()) {
                e.preventDefault();
                if (flag) {
                    createListItem();
                }
            } else {
                 e.preventDefault();

            }
        });

clicking the button works fine, but it does not show an error message in the corresponding field. I want to show an error message without submitting my form.

Answer 1

You cannot run your own tooltips other than submitting a form.

, , , , HTML5, ​​ .

, , ,

$('#btnContactSubmit').click(function (e) {
    if ($('#aspnetForm')[0].checkValidity()) {
        e.preventDefault();
        if (flag) {
            createListItem();
        }
    }
});

FIDDLE