面板验证

Question

我在第一个面板和第三个面板中有一个字段。当有一个空字段并且我在面板1上单击“下一步”时，验证不会显示“请输入名字”。到达第三个面板并选择“下一步”后，验证将显示“请输入名称”。有没有办法让验证在基于特定面板的空字段时显示通知，而不是转到第三个面板然后看到验证？

我注意到一个方面：当面板3字段不为空，并且选择“下一步”时，我无法进入第四个面板，因为面板1中的输入为空。这反过来也是如此。 （如果验证显示在面板1中，然后输入字段，则“下一步”将不会进入第三个面板。）

我尝试了什么 我试图定位按钮并删除验证目标的类。它不起作用，因为验证值在所有面板1-4上都是有效的。如果我竖起大拇指请告诉我原因，所以下次我可以改进我的问题。谢谢你的时间！

$(document).ready(function() {
  var $fieldsets =
    $('#panels .sets')
    .first()
    .addClass('active')
    .end()
    .not(':first')
    .hide()
    .end();

  var $panelControlButtons =
    $('#panelcontrol button')
    .filter('.btnPrev')
    .prop('disabled', true)
    .end();


  $('#panelcontrol')
    .on('click', 'button', function(e) {
      e.preventDefault();

      switch (true) {
        case $(this).hasClass('btnNext'):
          var $newFieldset =
            $fieldsets
            .filter('.active')
            .hide()
            .removeClass('active')
            .next()
            .addClass('active')
            .show();

          $('.btnNext').click(function(e) {

            var focusSet = false;
            // validate email - not empty


            //FIRST NAME
            if (!$('#first').val()) {
              if ($("#first").parent().next(".validation").length == 0) {
                $("#first").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter first name</div>");
              }
              //e.preventDefault();

              $('#first').focus();
              focusSet = true;

            } else {
              //ok
              $("#first").parent().next(".validation").remove();
            }


            //after all validate 
            if (focusSet) {

              $("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
            } else {


              $("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
            }
            

            //THIRD NAME
            if (!$('#third').val()) {
              if ($("#third").parent().next(".validation").length == 0) {
                $("#third").parent().after("<div class='validation' style='color:red;margin-top: -20px;'>Please enter third name</div>");
              }
              //e.preventDefault();

              $('#third').focus();
              focusSet = true;

            } else {
              //ok
              $("#third").parent().next(".validation").remove();
            }


            //after all validate 
            if (focusSet) {

              $("#c").removeClass("btnNext"); //remove class for continue button. Disabling continue
            } else {


              $("#c").addClass('btnNext'); //adds class for the continue button. Enabling continue
            }

          });



          if ($newFieldset.is('.two')) {
            var $newFieldset =
              $fieldsets
              .filter('.active')
              .hide()
              .removeClass('active')
              .next()
              .addClass('active')
              .show();
          }


          //$('.two').removeClass('active'); this removes the second panel when selecting prev button 

          if ($newFieldset.is(':nth-child(2)')) {
            $panelControlButtons
              .next();
          }

          //enable Prev button
          $panelControlButtons
            .filter('.btnPrev')
            .prop('disabled', false);
          $('.btnPrev_one_time').css('display', 'block');



          //disabled Next button
          if ($newFieldset.is(':last-child')) {
            $panelControlButtons
              .filter('.btnNext')
              .prop('disabled', true);
            $(':last-child').find(".btnNext_one_time").text("Place Payment"); //once last child element, btn will change text 
          }


          break; // btnNext
          var $input =
            $('input')
            .filter('.active')
            .end();
        case $(this).hasClass('btnPrev'):
          var $newFieldset =
            $fieldsets
            .filter('.active') //selects the current fieldset
            .hide() //hide it	
            .removeClass('active') //remove active flag
            .prev() //move to the previous fieldset
            .addClass('active') //flag as active
            .show();


          // testing only    $('.two').css('display','none').removeClass('active').next().addClass('active').show().filter();		
          $('.two').css('display', 'none').filter('.active')
            .filter('.active') //selects the current fieldset
            .hide() //hide it	
            .removeClass('active') //remove active flag
            .prev() //move to the previous fieldset
            .addClass('active') //flag as active
            .show();


          //and show it
          // enable Next button
          $panelControlButtons
            .filter('.btnNext')
            .prop('disabled', false);



          // disable Prev button			
          if ($newFieldset.is(':first-child')) {
            $panelControlButtons
              .filter('.btnPrev')
              .prop('disabled', true);
          }
          break; // btn Prev

      }

    }); // panelcontrol button handler


  $('.check_box').on('change', function() {
    if (this.checked) {
      $("#second_panel").removeClass('two');
    } else {
      $("#second_panel").addClass('two');
    }
  });

});

.sets {
  display: none;
}

.active {
  display: block;
}

<!doctype html>
<html lang="engl">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="jquery/main.js"></script>
  <meta charset="utf-8">
</head>

<body>
  <div id="container">
    <div id="panels">
      <div class="sets active">
        <h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
        <div>
          <label for="first">First Name</label>
          <input type="first" id="first" placeholder="" />
        </div>
      </div>

      <div id="second_panel" class="sets two">
        <h1>PANEL 2</h1>
        <p>w</p>
        <div>
          <label for="second">Second Name</label>
          <input type="second" id="second" placeholder="" />
        </div>
      </div>

      <div class="sets three">
        <h1>PANEL 3</h1>
        <div>
          <label for="third">Third Name</label>
          <input type="third" id="third" placeholder="" />
        </div>
      </div>

      <div class="sets active">
        <h1>PANEL 4</h1>
        <div><input name="ss4" value="" /></div>
      </div>
    </div>
    <form action="">
      <input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
    </form>
  </div>
  <div id="panelcontrol">
    <button class="btnPrev">Prev</button>
    <button class="btnNext" id="c">Next</button>
    <button class="btnNext_one_time">CONTINUE</button>
  </div>
  <script type="text/javascript" src="jquery-3.2.1.js"></script>
</body>

</html>

Answer 1

你可以做很多事情来清理你的代码。但是，如果您想在用户执行错误操作时立即显示验证消息，那么您需要验证功能在运行时立即返回并遇到问题。下面是一个示例，如果用户没有输入名字，则会立即显示错误。

修改

var next = document.getElementById('btnNext');
var previous = document.getElementById('btnPrev');
var inputs = [document.getElementById('first'), document.getElementById('second'), document.getElementById('third')];

function init() {
  //show first panel and hide other initially
  document.getElementById('first_panel').className = 'active';
  document.getElementById('second_panel').className = 'sets';
  document.getElementById('third_panel').className = 'sets';
  document.getElementById('fourth_panel').className = 'sets';

  //disable the buttons initially
  previous.disabled = true;
  previous.addEventListener('click', displayPreviousPanel);
  next.disabled = true;
  next.addEventListener('click', displayNextPanel);

  //add keyup event listeners to the text inputs
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('keyup', function() {
      //addEventListener has 'this' bound to current element
      if (validateInput(this.value)) {
        next.disabled = false;
      } else {
        next.disabled = true;
      }
    });
  }
}

function displayPreviousPanel() {
  //should only be 1 active at a time
  var currentlyVisible = document.getElementsByClassName('active')[0];

  var keyupEvt = new Event('keyup');
  switch (currentlyVisible.id) {
    case 'second_panel':
      document.getElementById('second_panel').className = 'sets';
      document.getElementById('first_panel').className = 'active';
      document.getElementById('first').dispatchEvent(keyupEvt);
      this.disabled = true;
      break;
    case 'third_panel':
      document.getElementById('third_panel').className = 'sets';
      document.getElementById('second_panel').className = 'active';
      document.getElementById('second').dispatchEvent(keyupEvt);
      break;
    case 'fourth_panel':
      document.getElementById('fourth_panel').className = 'sets';
      document.getElementById('third_panel').className = 'active';
      document.getElementById('third').dispatchEvent(keyupEvt);
      break;
  }
}

function displayNextPanel() {
  //disable next button again
  this.disabled = true;

  //undisable previous btn
  previous.disabled = false;

  //should only be 1 active at a time
  var currentlyVisible = document.getElementsByClassName('active')[0];
  switch (currentlyVisible.id) {
    case 'first_panel':
      document.getElementById('first_panel').className = 'sets';
      document.getElementById('second_panel').className = 'active';
      previous.disabled = false;
      break;
    case 'second_panel':
      document.getElementById('second_panel').className = 'sets';
      document.getElementById('third_panel').className = 'active';
      break;
    case 'third_panel':
      document.getElementById('third_panel').className = 'sets';
      document.getElementById('fourth_panel').className = 'active';
      break;
  }
}

//the function used to validate..add whatever you need here 
function validateInput(value) {
  var isValid = true;
  if (value.length < 1) {
    isValid = false;
  }

  return isValid;
}

init();

.sets {
  display: none;
}

.active {
  display: block;
}

<div id="container">
  <div id="validationMsg"></div>
  <div id="panels">
    <div id="first_panel" class="sets active">
      <h1>PANEL 1</h1><button>Attach/detach paragraphs</button>
      <div>
        <label for="first">First Name</label>
        <input type="first" id="first" placeholder="" />
      </div>
    </div>

    <div id="second_panel" class="sets two">
      <h1>PANEL 2</h1>
      <p>w</p>
      <div>
        <label for="second">Second Name</label>
        <input type="second" id="second" placeholder="" />
      </div>
    </div>

    <div id="third_panel" class="sets three">
      <h1>PANEL 3</h1>
      <div>
        <label for="third">Third Name</label>
        <input type="third" id="third" placeholder="" />
      </div>
    </div>

    <div id="fourth_panel" class="sets active">
      <h1>PANEL 4</h1>

      <div>
        <label for="second">Fourth Name</label>
        <input name="ss4" value="" /></div>
    </div>
  </div>
  <form action="">
    <input type="checkbox" name="vehicle" value="Bike" class="check_box">check for panel 2<br>
  </form>
</div>

<div id="panelcontrol">
  <button class="btnPrev" id="btnPrev">Prev</button>
  <button class="btnNext" id="btnNext">Next</button>
  <button class="btnContinue">CONTINUE</button>
</div>