我正在尝试以多步骤形式使用验证，当我使用验证时，它在最后一步中可以很好地与输入字段配合使用，但是问题是，在第一步和第二步中，我正在使用单选选项，并且正在尝试在此处使用验证，这样一来，如果不选择任何选项，则无法进行下一步。
$(document).ready(function() {
jQuery('#sucess').hide();
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(event) {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50) + "%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale(' + scale + ')'
});
next_fs.css({
'left': left,
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function() {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({
opacity: 0
}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1 - now) * 50) + "%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'left': left
});
previous_fs.css({
'transform': 'scale(' + scale + ')',
'opacity': opacity
});
},
duration: 800,
complete: function() {
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$("#msform").submit(function() {
var location = jQuery('#location').val();
if ($.trim(location).length == 0) {
document.getElementById("location").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Location !</span>');
jQuery('.fs-error').show();
return false;
}
var date = jQuery('#date').val();
if ($.trim(date).length == 0) {
document.getElementById("date").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter the Date !</span>');
jQuery('.fs-error').show();
return false;
}
var name = jQuery('#name').val();
if ($.trim(name).length == 0) {
document.getElementById("name").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Name !</span>');
jQuery('.fs-error').show();
return false;
}
var email = jQuery('#email').val();
if ($.trim(email).length == 0) {
document.getElementById("email").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Email !</span>');
jQuery('.fs-error').show();
return false;
}
var phone = jQuery('#phone').val();
if ($.trim(phone).length == 0) {
document.getElementById("phone").style.borderColor = "#E34234";
jQuery('.fs-error').html('<span style="color:red;"> Please Enter Your Phone Number !</span>');
jQuery('.fs-error').show();
return false;
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<form id="msform" method="POST" action="abc.php">
<!-- progressbar -->
<ul id="progressbar">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!-- fieldsets -->
<fieldset>
<div class="row">
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn first'>Singers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Bands</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Rappers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Djs</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Comedians</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Motivational Speakers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Dancers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Actors</span>
</label>
</div>
</div>
</div>
<input type="button" name="next" class="next action-button" value="NEXT" />
</fieldset>
<fieldset>
<h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
<h2 class="artist-type">Type of Event</h2>
<div class="row">
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn first'>Wedding</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Private Party</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Brand Launch</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Corporate Get-Together</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Collegue Event</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Charity</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Photo/Video Shoot</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Concert</span>
</label>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="BACK" />
<input type="button" name="next" class="next action-button" value="NEXT" />
</fieldset>
<fieldset>
<h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
<h2 class="artist-type">Type of Event</h2>
<div class="row">
<div class="col-md-12 my-2">
<h6 class="budget">Budget</h6>
<div class="rangeslider">
<input class="min" name="range_1" type="range" min="1" max="100" value="10" />
<input class="max" name="range_1" type="range" min="1" max="100" value="90" />
<span class="range_min light left">10.000</span>
<span class="range_max light right">90.000</span>
</div>
</div>
<div class="col-md-6 my-2">
<input type="text" name="location" id="location" class="event-details" placeholder="Event Location" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="date" id="date" class="event-details" placeholder="Event Date" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="name" id="name" class="event-details" placeholder="Name" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="email" id="email" class="event-details" placeholder="Email Id" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="phone" id="phone" class="event-details" placeholder="Phone Number" />
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="BACK" />
<button class="book-button" type="submit">SUBMIT</button>
</fieldset>
</form>
谢谢。
答案 0 :(得分：0)
一种简单的方法来检查是否选中了特定组中的任何单选按钮，您可以在验证功能内执行以下操作：
$("#msform").submit(function() {
//Your other validations here...
if (document.querySelectorAll('input[name="artist"]:checked').length > 0) {
alert('Artist group has a selection.');
} else {
alert('Artist group does not have a selection.');
}
if (document.querySelectorAll('input[name="event"]:checked').length > 0) {
alert('Event group has a selection.');
} else {
alert('Event group does not have a selection.');
}
}
答案 1 :(得分：0)
这里是您的完整代码。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
<form id="msform" method="POST" action="abc.php">
<!-- progressbar -->
<ul id="progressbar">
<li>Step1</li>
<li>Step2</li>
<li>Step3</li>
</ul>
<!-- error messages -->
<span class="fs-error"></span>
<!-- fieldsets -->
<fieldset>
<div class="row">
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn first'>Singers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Bands</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Rappers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Djs</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Comedians</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Motivational Speakers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Dancers</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="artist" type='radio'>
<span class='btn'>Actors</span>
</label>
</div>
</div>
</div>
<input type="button" name="next" class="next action-button" value="NEXT" />
</fieldset>
<fieldset>
<h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
<h2 class="artist-type">Type of Event</h2>
<div class="row">
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn first'>Wedding</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Private Party</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Brand Launch</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Corporate Get-Together</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Collegue Event</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Charity</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Photo/Video Shoot</span>
</label>
</div>
</div>
<div class="col-md-6 my-2">
<div class='btns'>
<label>
<input name="event" type='radio'>
<span class='btn'>Concert</span>
</label>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="BACK" />
<input type="button" name="next" class="next action-button" value="NEXT" />
</fieldset>
<fieldset>
<h5 class="concierge-mobile desktop-view">Celeb Concierge</h5>
<h2 class="artist-type">Type of Event</h2>
<div class="row">
<div class="col-md-12 my-2">
<h6 class="budget">Budget</h6>
<div class="rangeslider">
<input class="min" name="range_1" type="range" min="1" max="100" value="10" />
<input class="max" name="range_1" type="range" min="1" max="100" value="90" />
<span class="range_min light left">10.000</span>
<span class="range_max light right">90.000</span>
</div>
</div>
<div class="col-md-6 my-2">
<input type="text" name="location" id="location" class="event-details" placeholder="Event Location" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="date" id="date" class="event-details" placeholder="Event Date" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="name" id="name" class="event-details" placeholder="Name" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="email" id="email" class="event-details" placeholder="Email Id" />
</div>
<div class="col-md-6 my-2">
<input type="text" name="phone" id="phone" class="event-details" placeholder="Phone Number" />
</div>
</div>
<input type="button" name="previous" class="previous action-button" value="BACK" />
<button class="next" type="submit">SUBMIT</button>
</fieldset>
</form>
</body>
<script>
$(document).ready(function() {
$(".next").click(function(event) {
var current_index = $(this).parent().index("fieldset");
if(validateStep(current_index)){
makeStepActive(current_index+1);
}else{
event.preventDefault();
}
});
$(".previous").click(function() {
var current_index = $(this).parent().index("fieldset");
makeStepActive(current_index - 1);
});
makeStepActive(0);
});
function makeStepActive(index){
var step = $("#progressbar li:eq("+index+")");
var feildset = $("fieldset:eq("+index+")");
if(step.length){
$("#progressbar li").hide();
$("fieldset").hide();
step.show();
feildset.slideDown(500);
}
}
function validateStep(step){
switch(step){
case 0:
if(($("input[name='artist']:checked").length === 0)){
alert('select any artist!');
return false;
}
return true;
break;
case 1:
if(($("input[name='event']:checked").length === 0)){
alert('select any event!');
return false;
}
return true;
break;
default:
var ids = ['location', 'date', 'name', 'email', 'phone'];
var err = [];
ids.forEach(function(id, i){
var value = $("#"+id).val();
if ($.trim(value).length === 0) {
document.getElementById(id).style.borderColor = "#E34234";
err.push('Please Enter Your '+id);
}
});
if(err.length > 0){
$('.fs-error').html('<span style="color:red;">'+err.join('!<br>')+'</span>');
$('.fs-error').show();
return false;
}else{
return true;
}
}
}
</script>
</html>
注意：请始终编写最少的代码，以使其他人更容易理解。