Question

我的表格分为3个不同的步骤。

我想要两件事：

关注步骤2和3中的输入
验证步骤1和2中的非空字段

这是我的代码：

 window.onload = function() {
    document.getElementById("i_am").focus();
  };

 var form = document.getElementById('register'); 
 form.noValidate = true;
 form.addEventListener('submit', function(event) {

  if (!event.target.checkValidity()) {
        event.preventDefault(); 
         document.getElementById('youremailidMsg').innerHTML = document.getElementById('email_id').value == '' ? 'Please enter your email' : '';  
  }
   
 }, false);
 
 var questionNumber=0;
    var questions=document.querySelectorAll('.notshown');
            function next(){
              questionNumber++;

              if(questions.length>questionNumber)
              {
                    document.querySelector('.shown').classList.remove('shown');
              		questions[questionNumber].classList.add('shown');
              	
              }
                   
        }

.notshown {
  display: none;            
}

.shown {
  display: block;   
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="" id="register" method="POST" action="" > 
    
    <div id="q0" class="notshown shown form-group">      
        <div class="form-group">
          step 1 
          <select id="i_am"  class="form-control">
            <option value="">Choose your gender</option>
            <option value="1-1">Men</option>
            <option value="1-2">Woman</option>
          </select>
        </div>
           <a class="btn btn-danger" onclick="next()">NEXT</a>                                      
    </div>
   
    <div id="q1" class="notshown form-group">
        <div class="form-group">
          step 2   
          <input class="form-control" id="province_id" placeholder="City name" required="required">
         </div>                      
         <a class="btn btn-danger" onclick="next()" type="submit">NEXT</a>                                                                                              	                     
    </div>
              
    <div id="q2" class="notshown">                         
        <div class="form-group">
          step 3
          <input type="text" id="email_id"  placeholder="Your email" required="required">
          <div id="youremailidMsg"></div>        
         </div>                                                            
          <button type="submit" class="btn btn-danger" >REGISTER</button>                                                                 
    </div>  
                                      	                        	 	              
</form>

在这里运行
https://jsfiddle.net/h7v94mxz/9/

Answer 1

所以，我使用jQuery重写了这个，因为你在你的问题中包含了jQuery库，以及你提供的小提琴。

请记住，我没有花时间从验证的角度来证明这个防弹，但我认为你应该能够拿走我所拥有的并建立在它上面。

如果您有任何问题，请与我们联系。

  var questionNumber = -1;
  var questions = $('.notshown');
  var inputSelector = "input:not(:disabled):not([readonly]), textarea:not(:disabled):not([readonly]), select:not(:disabled):not([readonly])";
  var form = $('#register');

  form.on("input change propertychange", inputSelector, function() {
    validateInput(this);
  });

  function validateInput(control) {
    var $control = $(control);
    if ($control.is("div")) {
      $control.find(inputSelector).each(function() {
        validateInput(this);
      });
    } else {
      $control.removeClass("invalid-input");
      $control.siblings(".error-message").remove();
      if ($control.val() === "") {
        $errorMessage = $("<span/>");
        $errorMessage.addClass("error-message");
        $errorMessage.text("Value cannot be empty!");
        $control.addClass("invalid-input");
        $errorMessage.insertAfter($control);
      }
    }
  }

  function next() {
    var question = $(questions[questionNumber]);
    validateInput(question);
    if (question.find(".invalid-input").length) {
      // contains invalid inputs, do not proceed
      return false;
    } else {
      questionNumber++;
      question = $(questions[questionNumber]);
      if (questions.length > questionNumber) {
        $('.shown').removeClass('shown');
        question.addClass('shown');
        // focus first input in group
        question.find(inputSelector)[0].focus();
      } else {
        console.log('submitting!');
        form.submit();
      }
    }
  }

  next();

.notshown {
  display: none;
}
.shown {
  display: block;
}
.invalid-input {
  border: 1px solid red !important;
  background-color: pink !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="" id="register" method="POST" action="">

  <div id="q0" class="notshown form-group">
    <div class="form-group">
      step 1
      <select id="i_am" class="form-control">
        <option value="">Choose your gender</option>
        <option value="1-1">Men</option>
        <option value="1-2">Woman</option>
      </select>
    </div>
    <a class="btn btn-danger" onclick="next()">NEXT</a>
  </div>

  <div id="q1" class="notshown form-group">
    <div class="form-group">
      step 2
      <input class="form-control" id="province_id" placeholder="City name" required="required">
    </div>
    <a class="btn btn-danger" onclick="next()" type="submit">NEXT</a>
  </div>

  <div id="q2" class="notshown">
    <div class="form-group">
      step 3
      <input type="text" id="email_id" placeholder="Your email" />
      <div id="youremailidMsg"></div>
    </div>
    <a type="submit" onclick="next()" class="btn btn-danger">REGISTER</a>
  </div>
</form>

表格中3个步骤之间的验证

1 个答案: