How to check if there is no validation error exist in webpage using jquery?

Question

I am trying to check if all form fields are filled on click a button & if valid then i am trying to add a check an alert using jquery.

 jQuery("button#btn_place_order").click(function(event){
    jQuery("form").validate({
      submitHandler: function(form) {
        alert('ok');
      }
   });
});

This is what i have tried but its not working, i just want to check if all fields are ok valid & filled & there is no form related error then just console or alert to check. Webpage has two or more html forms. Is their any way we can check using jquery?

Thanks

Answer 1

First of you will have to prevent the default behavior of a form submit. Afterwards add a event listener to your button and check for validation of each input. (whatever that means for you). Is this what you wanted?

 var el = document.getElementById("form"); el.addEventListener("submit", function(event) { event.preventDefault(); }, true); document.getElementById("btn").addEventListener("click", validate); function validate(){ let valid = true; [...document.getElementById("form").elements].forEach((input) => { if(input.value.length == 0){ valid = false; } }); if(valid) alert("valid"); }

 <form id="form"> <input type="text" name="TEST" id="test"> </form> <button class="button" name="Send" value="Send" id="btn">Check</button>