我的网络中有多个表单，您可以根据查询显示/隐藏它们，但jquery验证只能处理第一个（特殊）。 在这里，我有表格：https://www.lokkura.es/contacto2.php点击左侧面板，您将更改表格。
表单1（jquery验证在这里工作）：
<div id="form1">
<form id="form" class="form" action="#" method="post">
<div class="clearfix">
<div class="col-md-6 text-center">
<div class="control-group">
<input name="name" type="text" class="validate['required'] textbox1" placeholder="* Nombre : "
onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Nombre :'" />
</div>
<div class="control-group">
<input name="name" type="text" class="validate['required'] textbox1" placeholder=" Ciudad : "
onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Ciudad :'" />
</div>
<div class="control-group">
<input name="email" type="text" class="validate['required','email'] textbox1"
placeholder="* Email : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Email :'"/>
</div>
<div class="control-group">
<input name="phone" type="text" class="validate['required'] textbox1"
placeholder="* Teléfono : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Teléfono :'"/>
</div>
</div>
<div class="col-md-6 text-center">
<div class="control-group">
<textarea name="message" class="validate['required'] messagebox1"
placeholder="* Mensaje : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Mensaje :'"></textarea>
</div>
</div>
<div class="clearfix">
<input value="Enviar Mensaje" name="submit" type="submit" class="submitBtn" />
</div>
<div id="post-message-contact" class="post_message"></div>
</div>
</form>
</div>
表单2（jquery验证在这里不起作用）：
<div id="form2" style="display:none">
<form id="form" class="form" action="#" method="post">
<div class="clearfix">
<div class="col-md-6 text-center">
<div class="control-group">
<input name="name" type="text" class="validate['required'] textbox1" placeholder="* Nombre : "
onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Nombre :'" />
</div>
<div class="control-group">
<input name="name" type="text" class="validate['required'] textbox1" placeholder=" Ciudad : "
onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Ciudad :'" />
</div>
<div class="control-group">
<input name="email" type="text" class="validate['required','email'] textbox1"
placeholder="* Email : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Email :'"/>
</div>
<div class="control-group">
<input name="name" type="text" class="validate['required'] textbox1" placeholder=" Empresa : "
onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Empresa :'" />
</div>
<div class="control-group">
<input name="name" type="text" class="validate['required'] textbox1" placeholder=" Web de Empresa : "
onfocus="this.placeholder = ''" onBlur="this.placeholder = '* Web de Empresa :'" />
</div>
<div class="control-group">
<input name="phone" type="text" class="validate['required'] textbox1"
placeholder="* Teléfono : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Teléfono :'"/>
</div>
</div>
<div class="col-md-6 text-center">
<div class="control-group">
<textarea name="message" class="validate['required'] messagebox1"
placeholder="* Mensaje : " onFocus="this.placeholder = ''" onBlur="this.placeholder = '* Mensaje :'"></textarea>
</div>
</div>
<div class="clearfix">
<input value="Enviar Mensaje" name="submit" type="submit" class="submitBtn" />
</div>
<div id="post-message-contact" class="post_message"></div>
</div>
</form>
</div>
Javascript代码：
jQuery(document).ready(function($){
"use strict";
$('#form').validate(
{
rules: {
name: {
minlength: 2,
required: true
},
phone: {
required: true,
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function(element) {
element
.text('').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('contact_form.php', $("#form").serialize(), function(data) {
// action file is here
$('#post-message-contact').html(data);
});
}
});
});
答案 0 :(得分：1)
您正在将.validate()附加到id="form"
$('#form').validate({...
但是，您有两个form元素具有相同的id。您不能在页面上多次使用相同的id。重复id是无效的HTML。 jQuery只会定位第一个实例。
即使您使用了class，也无法将各种jQuery Validate方法附加到一次定位多个元素的选择器。因此，即使您的目标正确选择了一组元素，也只会使用第一个实例。
1）您需要在每个表单上使用唯一 id来修复无效的HTML。
<form id="form_1" ...
<form id="form_2" ...
2）您需要构建一个针对该组中所有元素的选择器。您可以使用＆＃34;以＆＃34;开头选择器抓住＆＃34;以＆＃34;开头的每个id form_。
$('[id^="form_"]')
3）您需要将.validate()括在jQuery .each()中，以便将其应用于每个实例，而不仅仅是第一个实例。
jQuery(document).ready(function($){
$('[id^="form_"]').each(function() { // selects all forms with id starting with "form_"
$(this).validate({ .... // call 'validate()' method on each one
或者，您的.form class也适用于此。
jQuery(document).ready(function($){
$('.form').each(function() { // selects all forms with class="form"
$(this).validate({ .... // call 'validate()' method on each one
答案 1 :(得分：-1)
您应该为每个输入字段使用唯一名称属性。因为此处的名称不是唯一的，所以它仅适用于第一种形式。