Panels mit Validierung

Question

Ich habe ein Feld innerhalb der ersten und dritten Panel. Wenn ein leeres Feld angezeigt wird und ich auf "Weiter" in Feld eins klicke, wird in der Validierung nicht das Feld "Bitte Vorname eingeben" angezeigt. Sobald ich zum dritten Panel komme und "Weiter" wähle, zeigt die Validierung "Bitte Name eingeben" an. Gibt es eine Möglichkeit, dass die Validierung die Benachrichtigung anzeigen kann, wenn es leere Felder gibt, die auf ihrem spezifischen Panel basieren, anstatt zum dritten Panel zu gehen und dann die Validierung zu sehen?

Ein Aspekt, den ich bemerke: Wenn Panel 3 Feld ist nicht leer, und "Next" ausgewählt ist, kann ich nicht weiter zum vierten Panel, weil der Eingang in Panel 1 leer ist. Dies geschieht umgekehrt. (Wenn die Validierung in Panel 1 angezeigt wird und dann Felder eingegeben werden, wird "Weiter" nicht mit dem dritten Panel fortgesetzt).

Was ich versucht habe Ich versuchte, die Schaltflächen zu zielen und die Klasse zu entfernen, die von der Validierung abgezielt wird. Es hat nicht funktioniert, da der Validierungswert in allen Fenstern 1-4 aktiv ist. Wenn ich einen Daumen runter bekomme, informiere mich bitte über den Grund, damit ich meine Fragen beim nächsten Mal verbessern kann. Vielen Dank für Ihre Zeit!

$(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 \t 
 
      .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(); \t \t 
 
      $('.two').css('display', 'none').filter('.active') 
 
      .filter('.active') //selects the current fieldset 
 
      .hide() //hide it \t 
 
      .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 \t \t \t 
 
      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

Es gibt ziemlich viel Sie Ihren Code zu bereinigen tun könnte. Wenn Sie jedoch die Validierungsnachricht anzeigen möchten, sobald der Benutzer etwas falsch macht, müssen Sie Ihre Validierungsfunktion zurückgeben, sobald sie ausgeführt wird und ein Problem auftritt. Unten ist ein Beispiel, das sofort einen Fehler anzeigt, wenn der Benutzer den Vornamen nicht eingibt und als Wert angibt.

EDIT:

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>