有两个复选框的表格，用于就不同步骤（第一个和最后一个）达成一致。第一个工作完全正常，但是最后一步工作不正常。
这里是html代码
<form method="post" id="prizeRegistration" action="submit_book.php" enctype="multipart/form-data">
<fieldset id="step1" class="publisher">
<div class="stepSec01">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="email">Are you a Publisher?<span class="strik">*</span></label>
<div class="check">
<ul class="radioCls">
<li>
<input type="radio" id="Yes" checked="" name="publisher" value="yes">
<label for="Yes"> <span></span>Yes</label>
</li>
<li>
<input type="radio" id="No" name="publisher" value="no">
<label for="No"> <span></span>No</label>
</li>
</ul>
<div class="error" id="error_publisher"></div>
</div>
</div>
</div>
....
....
....
<div class="col-md-12">
<div class="form-group">
<div class="checkbox">
<p>By checking the box below, you hereby declare that all information submitted by you holds true.<span class="strik adStrik">*</span></p>
<input type="checkbox" id="agreement" name="agreement" value="agree" />
<label for="agreement"> <span></span>I agree</label>
</div>
<div class="error" id="error_agreement"></div>
</div>
<div class="form-group">
<a href="javascript:void(0)" id="stepone" class="btn next">Next</a>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset id="step2" class="book" style="display:none;">
...
</fieldset>
<fieldset id="step3" class="author" style="display:none;">
....
</fieldset>
<fieldset id="step4" class="editor" style="display:none;">
.....
</fieldset>
<fieldset id="step5" class="declaration" style="display:none;">
<div class="stepSec05">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="checkbox">
<p>I hereby declare that all information submitted as part of the form is true to my knowledge. Any information shared with me (as a representative of my Publishing House)
will be kept confidential. A breach in the same will lead to the disqualification of the entries made by the Publishing House, for the foreseeable future.<span class="strik">*</span>
</p>
<input type="checkbox" id="declaration" name="declaration" value="agree" />
<label for="declaration"><span></span>I Agree</label>
<div class="error" id="error_declaration"></div>
</div>
</div>
<div class="form-group"> <button type="submit" id="stepfive" class="btn">Submit</button> </div>
</div>
</div>
</div>
</fieldset>
</form>
这里是 jQuery 验证码
<script>
$(document).ready(function() {
$(".error").removeClass("error");
$(".next").click(function() {
var form = $("#prizeRegistration");
jQuery.validator.addMethod("agreement", function(value, element) {
if ($("#agreement").is(":checked")) {
return true;
} else {
return false;
}
}, "Please check the box.");
jQuery.validator.addMethod("declaration", function(value, element) {
//var ckb_status = $("#declaration_agreement").prop('checked');
if ($("#declaration").is(":checked")) {
return true;
} else {
return false;
}
}, "Please check the box.");
jQuery.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
}, "Letters only please");
$.validator.addMethod('filesize', function(value, element, param) {
return this.optional(element) || (element.files[0].size <= param * 1000000)
}, 'File size must be less than {0} MB');
form.validate({
// ignore: [':not(checkbox:hidden)'],
submitHandler: function() {
$('.loaderhome').show();
form.submit();
},
focusCleanup: true,
errorPlacement: function(error, element) {
var name = $(element).attr("name");
error.insertAfter($("#error_" + name));
},
rules: {
email: {
required: true,
email: true,
},
publisher: {
required: true,
},
pbh_name: {
required: true,
lettersonly: true
},
imprint_name: {
required: true,
lettersonly: true
},
reg_address: {
required: true,
},
reg_phone: {
required: true,
number: true,
maxlength: 10,
minlength: 10
},
contact_person: {
required: true,
lettersonly: true
},
cp_email: {
required: true,
email: true,
},
cp_phone: {
required: true,
number: true,
maxlength: 10,
minlength: 10
},
proof: {
required: true,
filesize: 2
},
agreement: {
required: true,
},
published: {
required: true,
},
english: {
required: true,
},
book_title: {
required: true
},
published_date: {
required: true,
},
publishing_date: {
// required: true
},
isbn_code: {
required: true,
number: true,
maxlength: 13,
minlength: 10
},
orignal_title: {
lettersonly: true
},
original_lang: {
lettersonly: true
},
original_publisher: {
lettersonly: true
},
original_pub_date: {
},
original_isbn_code: {
number: true,
maxlength: 13,
minlength: 10
},
other_territory_pub: {
required: true,
},
territory_of_pub: {
lettersonly: true
},
other_territory_date_of_pub: {
},
book_cover: {
required: true,
filesize: 2
},
ebook: {
required: true,
filesize: 2
},
author_name: {
required: true,
lettersonly: true
},
author_date_of_birth: {
required: true,
},
author_email: {
required: true,
},
author_address: {
required: true,
},
author_proof_of_citizen: {
required: true,
filesize: 2
},
editor_name: {
required: true,
lettersonly: true
},
editor_email: {
required: true,
email: true,
},
editor_contact_number: {
required: true,
number: true,
maxlength: 10,
minlength: 10
},
declaration: {
required: true,
}
},
});
console.log(form);
if (form.valid() === true) {
if ($('#step1').is(":visible")) {
current_fs = $('#step1');
next_fs = $('#step2');
$('#publisher').removeClass('active');
$('#publisher').addClass('grnactive');
$('#book').addClass('active');
} else if ($('#step2').is(":visible")) {
current_fs = $('#step2');
next_fs = $('#step3');
$('#book').removeClass('active');
$('#book').addClass('grnactive');
$('#author').addClass('active');
} else if ($('#step3').is(":visible")) {
current_fs = $('#step3');
next_fs = $('#step4');
$('#author').removeClass('active');
$('#author').addClass('grnactive');
$('#editor').addClass('active');
} else if ($('#step4').is(":visible")) {
current_fs = $('#step4');
next_fs = $('#step5');
$('#editor').removeClass('active');
$('#editor').addClass('grnactive');
$('#declaration').addClass('active');
} else if ($('#step5').is(":visible")) {
current_fs = $('#step5');
next_fs = $('#step1');
$('#declaration').addClass('active');
$('#declaration').addClass('grnactive');
}
next_fs.show();
current_fs.hide();
}
});
$('.backBtn').click(function() {
if ($('#step5').is(":visible")) {
current_fs = $('#step5');
next_fs = $('#step4');
} else if ($('#step4').is(":visible")) {
current_fs = $('#step4');
next_fs = $('#step3');
} else if ($('#step3').is(":visible")) {
current_fs = $('#step3');
next_fs = $('#step2');
} else if ($('#step2').is(":visible")) {
current_fs = $('#step2');
next_fs = $('#step1');
}
next_fs.show();
current_fs.hide();
});
});
</script>
我试图更改名称，因为，id。当我们到达最后一步声明块时，它会自动添加有效类。我希望它在提交时显示错误而不检查它。但是，它仅在您单击或切换复选框时起作用。