多步骤表单中的单选按钮验证

Question

我正在尝试在我的多步骤表单中使用验证，当我使用验证时，它在最后一步中的输入字段可以正常工作，但问题是，在第一步和第二步中，我正在使用单选选项并且我正在尝试在那里使用验证，以便在不选择任何选项的情况下无法进入下一步。

$(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>

提前致谢。

Answer 1

这里是您的完整代码。

<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>

注意：始终编写最少的代码，以便他人更容易理解。

Answer 2

检查是否选择了特定组中的任何单选按钮的简单方法，您可以在验证函数中执行以下操作：

$("#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.');
}
}