html5 validation error message without submitting form

Question

I am developing an app in which I am using HTML5 fields in my form. I want to trigger html5 field validation on button click for this purpose I have written 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();

            }
        });

button click is working fine but it doesnot showing error message on relevant field I want to show error message without submitting my form.

Answer 1

There is no way to trigger the native tooltips other than submitting the form.

If the form is valid, prevent it from submitting, and if it's not valid, just submit it, and the native HTML5 validation will happen, but the form won't be submitted anyway.

You are preventing the default action in both conditions, so the validation never happens, do it like this, and it will

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

FIDDLE