Javascript 当一个'时验证两个表单；一方的意见取决于另一方

我正在做这个项目，一直在进行表单验证。我有两个表单，表单X和表单Y，我想使用jQuery验证插件来实现客户端验证。这是我第一次使用这个插件，所以如果我的问题看起来很简单，我会提前道歉。 我已经设置了表单，因此用户必须同时填写表单X和表单Y才能以两种形式提交数据。完成后，通过Ajax提交表单X，并作为成功响应的结果提交表单Y。提交过程运行良好，所有数据都能完美地发送。然而，我无法让验证工作。我仔细阅读了文档和多个论坛，但未能找到有效的解决方案。如有任何建议或相关文献链接，将不胜感激。以下是相关的javascript和html：

<script>
$("#formYsubmit").click(function(e){
        e.preventDefault();
    $.ajax({
        url: "the resulting page",  
    type: "POST",
        data: formXdata, 
        error: function(resp) {
            console.log(resp);
        },
        success: function(resp) {
            $("#formY").submit();
        }
    });

    $(this).disabled=true;
    $(this).val()="Sending..."
    return false;
});

$('#formX').validate({
    rules: {
        email: {
                required: true,
                email: true
                },
        password: {
                minlength: 6,
                required: true
                },
        full_name: {
                required: true
                },
        site_address: {
                minlength: 5,
                },
        phone: {
                minlength: 10,
                phoneRegex: true
                }
    },
    messages: {
        email: "Please enter a valid email address",
        site_address: "Please enter your website name",
        full_name: "Please enter your name",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 6 characters long"
        },
        phone: "Please enter a valid phone number",         
        email: "Please enter a valid email address"
    },
    highlight: function(label) { 
        $(input).closest('.control-group').addClass('error');
    },
    success: function(label) {
        label.text('OK!').addClass('valid');
    }
});
$('#formY').validate({
    rules: {
        plan_input: {
                required: true,
                },
        fieldA: {
                required: true
                },
        fieldB: {
                required: true
                },
        fieldC: {
                required: true
                },
    },
    highlight: function(label) { 
        $(input).addClass('error');
    },
    success: function(label) {
        label.text('OK!').addClass('valid');
    }
});
</script>


<form id="formX" style="float:left; width:40%;" method="post">
    <div class="control-group">
        <div class="controls">                          
            <input id="full_name" name="full_name" placeholder="Full Name" type="text" />
        </div>
        <label class="error"></label>
    </div>    
    <div class="control-group">
        <div class="controls">
            <input class="required" id="email" maxlength="75" name="email" placeholder="Email ID" type="text" />
        </div>
    </div> 
    <div class="control-group">
        <div class="controls">
            <input class="required" id="password" name="password" placeholder="Password" type="password" />
        </div>
        <label class="error"></label>
    </div> 
    <div class="control-group">
        <div class="controls">
            <input id="site_address" name="site_address" placeholder="Website" type="text" />
        </div>
        <label class="error"></label>
    </div>
    <div class="control-group">
        <div class="controls">
            <input id="phone" maxlength="25" name="phone" placeholder="Phone" type="text" />
        </div>
        <label class="error"></label>
    </div>
</form>
<div id="frontServerErrorContainer"></div>
<form id="formY" style="float:left;width:40%;" method="post" action="">
    <select name="plan_input" class="field" id="plan-select" disabled>
        <option value="">Choose Plan</option>
        <option value="1">Option A</option>
        <option value="2">Option B</option>
        <option value="3">Option C</option>
    </select>
    <div id="serverErrorContainer2"></div>
    <div id="errorContainer2"><ul id="errorContainer2"></ul></div>
    <div class="sh form-field cl-div control-group" >
        <input type='text' class="field" name='fieldA' value="" placeholder="fieldA" id="fieldA">
    </div>
    <div class="sh form-field cl-div control-group" >
        <input type='text' class="field" name='fieldB' value="" placeholder="fieldB" id="fieldB">
    </div>
    <div class="sh form-field cl-div control-group" >
        <input type='text' class="field" name='fieldC' value="" placeholder="fieldC" id="fieldC">
    </div>
    <button class="bootstrapbtn bootstrapbtn-primary" id="formYsubmit">Submit</button>
</form>

$（“#表单提交”）。单击（函数（e）{
e、 预防默认值（）；
$.ajax({
url:“结果页面”，
类型：“POST”，
数据：formXdata，
错误：函数（resp）{
控制台日志（resp）；
},
成功：功能（resp）{
$（“#formY”）.submit（）；
}
});
$（this）.disabled=true；
$（this）.val（）=“正在发送…”
返回false；
});
$（'#formX'）。验证({
规则：{
电邮：{
要求：正确，
电子邮件：真的
},
密码：{
最小长度：6，
必填项：true
},
全名：{
必填项：true
},
网站地址：{
最小长度：5，
},
电话：{
最小长度：10，
phoneRegex：对
}
},
信息：{
电子邮件：“请输入有效的电子邮件地址”，
网站地址：“请输入您的网站名称”，
全名：“请输入您的姓名”，
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为6个字符”
},
电话：“请输入有效的电话号码”，
电子邮件：“请输入有效的电子邮件地址”
},
突出显示：函数（标签）{
$（输入）。最近（'.control group'）。addClass（'error'）；
},
成功：功能（标签）{
label.text（'OK！'）.addClass（'valid'）；
}
});
$（'#formY'）。验证({
规则：{
计划输入：{
要求：正确，
},
菲尔达：{
必填项：true
},
字段B：{
必填项：true
},
fieldC：{
必填项：true
},
},
突出显示：函数（标签）{
$（输入）.addClass（'error'）；
},
成功：功能（标签）{
label.text（'OK！'）.addClass（'valid'）；
}
});
选择计划
方案A
方案B
备选案文C

提交

---

我为这段非常长的代码或者如果这个问题太简单而道歉。谢谢大家!

您的

ajax

属于Validate插件的

submitHandler

回调。您还需要将所有内容包装在一个DOM ready hander函数中，以确保调用

.validate（）

时HTML存在。您不应该需要任何

ajax

之外的

.validate（）

，也不应该需要任何额外的

单击

处理程序

<script>

    $(document).ready(function() {

        $('#formX').validate({
            // rules & options here
        });

        $('#formY').validate({
            // rules & options here,
            submitHandler: function(form) {
                // only fires when form is valid
                $("#formYsubmit").disabled=true;
                $("#formYsubmit").val()="Sending..."
                form.serialize();
                // your ajax here
                return false; // prevent the regular form submit when using ajax
            }
        });

    });

</script>

$（文档）.ready（函数（）{
$（'#formX'）。验证({
//这里的规则和选项
});
$（'#formY'）。验证({
//这里的规则和选项，
submitHandler:函数（表单）{
//仅在窗体有效时激发
$（“#formYsubmit”）.disabled=true；
$（“#formYsubmit”）.val（）=“正在发送…”
form.serialize（）；
//你的ajax在这里
return false；//使用ajax时防止常规表单提交
}
});
});

文档：

submitHandler（默认值：本机表单提交）
键入：Function（）
回调 用于在表格有效时处理实际提交。获取表单 作为唯一的论据。替换默认提交正确的位置 验证后通过Ajax提交表单。

---

将精力集中在文档中的

submitHandler

回调函数上。谢谢。我现在正在做一个例子。我要回去工作了，但这就是我现在的正常工作时间。可能有一些明显的东西我没有看到我的答案。另外，去掉

submitHandler

中的

e.preventDefault（）

。确定以保持

返回false

。