时间戳

首页 > 解决方案 > jQuery 验证仅在第二次提交时触发

javascript - jQuery 验证仅在第二次提交时触发

问题描述

我在 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()。它只会在第二次提交点击时触发。

标签： javascriptjqueryreactjsvalidation

解决方案

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

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

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

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

看到你在 React 中使用 jQuery，它比这更复杂一些。

推荐阅读