jQuery 验证仅在第二次提交时触发答案

【问题标题】：jQuery validate only get triggered on the second submitjQuery 验证仅在第二次提交时触发
【发布时间】：2021-04-29 07:49:39
【问题描述】：

我在 javascript 中有 jquery 验证函数，它将被 react js 函数调用。

反应 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" }
        }
    });
}

第一次提交是调用validateForm() 函数但它不会触发jquery validate()。它只会在第二次提交点击时触发。

【问题讨论】：

Why is it a bad idea to mix jQuery and React?

标签： javascript jquery reactjs validation

【解决方案1】：

原因是您在第一次点击时分配了验证。它分配自己的事件侦听器。第二次单击运行它，您还再次重新分配验证代码。

您只需调用文档上的代码即可。所以摆脱on submit

我在 javascript 中有 jQuery 验证函数，该函数将从 react js 函数中调用。

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

看到你正在使用带有 React 的 jQuery，它比这要复杂一些。

【讨论】：