我的网站中有多个表单，您可以根据您的查询显示/隐藏它们，但 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);
});
}
});
});
最佳答案
您正在将 .validate() 附加到带有 id="form" 的元素
$('#form').validate({...
但是，您有两个
form元素具有相同的id。您不能在一个页面上多次使用相同的id。重复id是无效的 HTML。 jQuery 将仅针对第一个 实例。即使您使用
类，各种 jQuery Validate 方法也无法附加到一次针对多个元素的选择器。同样，即使您的目标正确选择了一组元素，也只会使用第一个实例。
1) 您需要在每个表单上使用唯一 id 来修复无效的 HTML。
<form id="form_1" ...
<form id="form_2" ...
2) 您需要构建一个针对该组中所有元素的选择器。您可以使用“开头为”选择器来获取“开头为”form_ 的每个 id。
$('[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
关于jquery validate 不适用于多种表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24635559/