我在表单中使用jQuery验证,在进行下一步而不是表单提交时进行验证。所有其他验证工作(文本,复选框等),但收音机没有。请在下面找到代码和html。正如您将在js代码中看到的那样,我尝试了在必需时编写相同检查命令的不同方法。
HTML
<label for="q11"><input type="radio" value="1" name="question1" id="q11"><span>1</span></label>
JS
$('.form').validate({
ignore: ":not(:visible)",
rules: {
name : "required",
email : {required : true, email:true},
country : "required",
username : "required",
password : "required",
question1: 'required',
question2: 'required',
question3: "required",
question4: {required: true},
question5: {required: true},
question6: {required: true}
},
});
全JS
$(document).ready(function(){
var current = 1;
widget = $(".step");
btnnext = $(".next");
btnback = $(".back");
btnsubmit = $(".submit");
// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);
// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})
$('.form').validate({ // initialize plugin
ignore: ":not(:visible)",
rules: {
name : "required",
email : {required : true, email:true},
country : "required",
username : "required",
password : "required",
question1: 'required',
question2: 'required',
question3: "required",
question4: {required: true},
question5: {required: true},
question6: {required: true}
},
});
});
// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}
// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length);
$(".action").hide();
if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) {
// Show entered values
$(".display label:not(.control-label)").each(function(){
console.log($(this).find("label:not(.control-label)").html($("#"+$(this).data("id")).val()));
});
btnnext.hide();
btnsubmit.show();
}
}
我在这里检查了所有其他问题但没有解决它。