javascript - jQuery validate only get triggered on the second submit

Question

I have the jquery validation function in the javascript which will get called from react js function.

React JS

function handleFormSubmit(e){
    e.preventDefault()
    window.validateForm();
}

return (
    <form id="contactForm" onSubmit={handleFormSubmit} novalidate="novalidate">
        <input name="name" id="name" type="text" placeholder="Name" onChange={handleInputChange} />
        <textarea name="address" id="address" cols="4" rows="4" placeholder="Address" onChange={handleInputChange}></textarea>
        <button type="submit">Submit</button>
    </form>
)

JavaScript

function validateForm(){
    $("#contactForm").validate({
        rules: { 
            name: { required: true }, 
            address: { required: true }
        },
        messages: {
            name: { required: "Name field is required" },
            address: { required: "Address field is required" }
        }
    });
}

The first submit is calling the validateForm() function but it won't trigger the jquery validate(). It only get triggered on the second submit click.

question from:https://stackoverflow.com/questions/65885916/jquery-validate-only-get-triggered-on-the-second-submit

Answer 1

The reason is because you are assigning the Validation on the first click. It assigns its own event listener. The second click runs it and you also reassign the validate code again.

You need to just call the code on document ready. So get rid of the on submit

I have the jQuery validation function in the javascript which will get called from react js function.

$(function () {
  window.validateForm();
});

And seeing you are using jQuery with React, it is a bit more complicated than that.