How to force a html5 form validation without submitting it via jQuery

below code works for me,

$("#btn").click(function () {

    if ($("#frm")[0].checkValidity())
        alert('sucess');
    else
        //Validate Form
        $("#frm")[0].reportValidity()

});

2022 vanilla JS solution

Pure JavaScript has all the functions you need for this. I know the question was about jQuery, but even the answers with jQuery use these functions, which are checkValidity() and reportValidity().

Test entire form

let form = document.getElementById('formId');
// Eventlistener can be another event and on another DOM object this is just an example
form.addEventListener('submit', function (event) {
    // Only needed if event is submit, otherwise this line can be skipped 
    event.preventDefault();

    // This is the important part, test if form is valid
    if (form.checkValidity() === false){
        // This is the magic function that displays the validation errors to the user
        form.reportValidity();   
        return; 
    }

    // Code if all fields are valid; continue form submit or make Ajax call.
})

Test specific field

checkValidity() and reportValidity() can not only be used on the form, but also on specific fields. No need to create a form or a dummy submit button if not needed.

// Get field of interest
let inputElement = document.querySelector("[name='" + inputName + "']");
// Check if the element is valid
if (inputElement.checkValidity() === false){
    // If not, show the errors to the user
    inputElement.reportValidity();
    return;
}

// Nothing? Great, continue to the Ajax call or whatever

This has to be in a function called by an event listener to make sense, obviously.

This way works well for me:

1. Add onSubmit attribute in your form, don't forget to include return in the value.

   <form id='frm-contact' method='POST' action='' onSubmit="return contact()">
   

2. Define the function.

   function contact(params) {
       $.ajax({
           url: 'sendmail.php',
           type: "POST",
           dataType: "json",
           timeout: 5000,
           data: { params:params },
           success: function (data, textStatus, jqXHR) {
               // callback
           },
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(jqXHR.responseText);
           }
       });
   
       return false;
   }
   

I think the best approach

will be using jQuery Validation plugin which uses best practice for form validation and it also has good browser support. So you don't need to worry about browser compatibility issues.

And we can use jQuery validation valid() function which checks whether the selected form is valid or whether all selected elements are valid without submitting the form.

<form id="myform">
   <input type="text" name="name" required>
   <br>
   <button type="button">Validate!</button>
</form>
<script>
  var form = $( "#myform" );
  form.validate();
  $( "button" ).click(function() {
    console.log( "Valid: " + form.valid() );
  });
</script>

According to the question html5 validity should be validate able using jQuery at first and in most of the answer this is not happening and the reason for this is as following:

while validating using html5 form's default function

checkValidity();// returns true/false

we need to understand that jQuery returns object array, while selecting like this

$("#myForm")

therefore, you need to specify the first index to make checkValidity() function work

$('#myForm')[0].checkValidity()

here is the complete solution:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}