在多步表单中进行单选按钮验证

Question

我尝试在我的多步骤表单中使用验证，当我使用验证时，它与最后一步中的输入字段一起工作得很好，但问题是，在第一步和最后一步中，我使用单选选项，并且我试图在那里使用验证，因此如果不选择任何选项，则无法移动到下一步。

​

var currentTab=0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
  // This function will display the specified tab of the form...
  var x=document.getElementsByClassName("tab");
  x[n].style.display="block";
  //... and fix the Previous/Next buttons:
  if(n==0) {
    document.getElementById("prevBtn").style.display="none";
  }
  else {
    document.getElementById("prevBtn").style.display="inline";
  }
  if(n==(x.length-1)) {
    document.getElementById("nextBtn").innerHTML="Submit";
  }
  else {
    document.getElementById("nextBtn").innerHTML="Next";
  }
  //... and run a function that will display the correct step indicator:
  fixStepIndicator(n)
}

function nextPrev(n) {
  // This function will figure out which tab to display
  var x=document.getElementsByClassName("tab");
  // Exit the function if any field in the current tab is invalid:
  if(n==1 && !validateForm()) return false;
  // Hide the current tab:
  x[currentTab].style.display="none";
  // Increase or decrease the current tab by 1:
  currentTab=currentTab+n;
  // if you have reached the end of the form...
  if(currentTab>=x.length) {
    // ... the form gets submitted:
    document.getElementById("bookingForm").submit();
    return false;
  }
  // Otherwise, display the correct tab:
  showTab(currentTab);
}

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, z, i, n, valid=true;
  x=document.getElementsByClassName("tab");
  y=x[currentTab].querySelectorAll('input');
  // A loop that checks every input field in the current tab:
  for(i=0; i<y.length; i++) {
    // If a field is empty...
    if(y[i].value=="") {
      // add an "invalid" class to the field:
      y[i].className+=" invalid";
      // and set the current valid status to false
      valid=false;
    }

  }

  // If the valid status is true, mark the step as finished and valid:
  if(valid) {
    document.getElementsByClassName("step")[currentTab].className+=" finish";
  }
  return valid; // return the valid status
}

function fixStepIndicator(n) {
  // This function removes the "active" class of all steps...
  var i, x=document.getElementsByClassName("step");
  for(i=0; i<x.length; i++) {
    x[i].className=x[i].className.replace(" active", "");
  }
  //... and adds the "active" class on the current step:
  x[n].className+=" active";
}

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <form id="bookingForm" autocomplete="off" name="form">
        <!-- One "tab" for each step in the form: -->
        <div class="tab">
          <h3>Add Pet Details</h3>
          <label class="ml-4 mt-2">What type of pet?</label>
          <div class="row m-2">
            <div class="col-md-3 mb-3 radio-toolbar">
              <input type="radio" id="cat" class="form-control" value="Cat" name="type">
              <label for="cat" class="form-label">Cat</label>
            </div>
            <div class="col-md-3 mb-3 radio-toolbar">
              <input type="radio" id="dog" class="form-control" value="Dog" name="type">
              <label for="dog" class="form-label">Dog</label>
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-6 mb-3">
              <label class="mt-2 mb-3" for="breed">Breed of your pet?</label>
              <input type="text" class="form-control" id="breed" placeholder="Please enter your pet's breed...">
            </div>
          </div>
          <label class="ml-4 mt-2">Gender of your pet?</label>
          <div class="row m-2">
            <div class="col-md-3 mb-3 radio-toolbar">
              <input type="radio" class="form-control" value="Male" id="male" name="gender">
              <label for="male" class="form-label">Male</label>
            </div>
            <div class="col-md-3 mb-3 radio-toolbar">
              <input type="radio" id="female" class="form-control" value="Female" name="gender">
              <label for="female" class="form-label">Female</label>
            </div>
          </div>
          <label class="ml-4 mt-2">Size of your pet?</label>
          <div class="row m-2">
            <div class="col-md-4 mb-3 radio-toolbar">
              <input type="radio" id="small" name="size" class="form-control" value="Small">
              <label for="small" class="form-label">Small</label>
            </div>
            <div class="col-md-4 mb-3 radio-toolbar">
              <input type="radio" id="medium" name="size" class="form-control" value="Medium">
              <label for="medium" class="form-label">Medium</label>
            </div>
            <div class="col-md-4 mb-3 radio-toolbar">
              <input type="radio" id="large" name="size" class="form-control" value="Large">
              <label for="large" class="form-label">Large</label>
            </div>
          </div>
          <label class="ml-4 mt-2">How Aggressive is your pet?</label>
          <div class="row m-2">
            <div class="col-md-4 mb-3 radio-toolbar">
              <input type="radio" id="low" name="aggression" class="form-control" value="Low">
              <label for="low" class="form-label">Low</label>
            </div>
            <div class="col-md-4 mb-3 radio-toolbar">
              <input type="radio" id="normal" name="aggression" class="form-control" value="Normal">
              <label for="normal" class="form-label">Normal</label>
            </div>
            <div class="col-md-4 mb-3 radio-toolbar">
              <input type="radio" id="high" name="aggression" class="form-control" value="High">
              <label for="high" class="form-label">High</label>
            </div>
          </div>
        </div>
        <div class="tab">
          <h3>Please Enter your Personal Details.</h3>
          <div class="row m-2">
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="fname">Your Full Name</label>
              <input type="text" class="form-control" id="fname" placeholder="Please enter your full name...">
            </div>
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="email">Your Email</label>
              <input type="email" class="form-control" id="email" name="email" placeholder="Please enter your email id...">
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-12">
              <label class="mt-2 mb-3" for="location">Search Your Society/Locality</label>
              <input type="text" class="form-control" id="location" placeholder="Please search your location here...">
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="address">House/Flat No.</label>
              <input type="text" class="form-control" id="address" placeholder="Please enter your address...">
            </div>
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="city">city</label>
              <input type="text" class="form-control" id="city" placeholder="Please enter your City Name...">
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="state">State</label>
              <input type="text" class="form-control" id="state" placeholder="Please enter your State Name...">
            </div>
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="contact">Your Contact Number</label>
              <input type="text" class="form-control" id="contact" placeholder=" Please enter your valid contact number...">
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-12">
              <label class="mt-2 mb-3" for="msg">Additional Note for Groomer(optional)</label>
              <textarea class="form-control" id="msg" rows="3"></textarea>
            </div>
          </div>
        </div>
        <div class="tab">
          <div class="row m-2">
            <div class="col-md-6">
              <label class="mt-2 mb-3" for="date">Select Date</label>
              <input type="date" name="bday" min="1000-01-01" max="3000-12-31"
                     class="form-control" placeholder="dd-mm-yyyy">
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-4 mt-3 radio-toolbar">
              <input type="radio" id="time-1" name="time" class="form-control" value="09:00 to 11:00 AM">
              <label for="time-1" class="form-label">09:00 to 11:00 AM</label>
            </div>
            <div class="col-md-4 mt-3 radio-toolbar">
              <input type="radio" id="time-2" name="time" class="form-control" value="11:00 to 01:00 PM">
              <label for="time-2" class="form-label">11:00 to 01:00 PM</label>
            </div>
            <div class="col-md-4 mt-3 radio-toolbar">
              <input type="radio" id="time-3" name="time" class="form-control" value="01:00 to 03:00 PM">
              <label for="time-3" class="form-label">01:00 to 03:00 PM</label>
            </div>
          </div>
          <div class="row m-2">
            <div class="col-md-4 mt-3 radio-toolbar">
              <input type="radio" id="time-4" name="time" class="form-control" value="03:00 to 05:00 PM">
              <label for="time-4" class="form-label">03:00 to 05:00 PM</label>
            </div>
            <div class="col-md-4 mt-3 radio-toolbar">
              <input type="radio" id="time-5" name="time" class="form-control" value="05:00 to 07:00 PM">
              <label for="time-5" class="form-label">05:00 to 07:00 PM</label>
            </div>
          </div>
        </div>
        <!-- Circles which indicates the steps of the form: -->
        <div>
          <span class="step"></span>
          <span class="step"></span>
          <span class="step"></span>
        </div>
      </form>
    </div>
  </div>
</div>

​

Answer 1

你能在无线电标签上使用required吗？如下所示：

<input type="radio" id="cat" class="form-control" value="Cat" name="type" required>