Petersilie js: Wie Eingabefelder innerhalb Modal Popup-und Display-Fehlermeldungen innerhalb des modalen selbst

Question

Wie zu validieren Seite zu validieren Eingabefelder in einem Modal Popup mit Petersilie js ..

Ich habe bereits einen Fehler Behälter in dem Layout der funktioniert für Eingabefelder auf Seitenebene. Ich möchte Validate Eingabefelder in einem modalen Popup und Fehlermeldung auch im Popup angezeigt werden soll ..

Jede Hilfe !!!

Answer 1

Um Validierungsfehler innerhalb einer bestimmten der Modal, müssen Sie verwenden, um diese data attribute auf die Eingabeelemente anzuzeigen:

data-parsley-errors-container="#modal_div_error_container" 

Dies ist, wie Sie bestätigen können die Eingabefelder in Ihrem Modal <div>

JS:

$(function(){ 
    var parsley_valiation_options = { 
     //errorsWrapper: '', 
     errorTemplate: '<span class="error-msg"></span>', 
     errorClass: 'error', 
    } 
    //check if modal_div element exists on the page 
    if ($('#modal_div').length > 0) { 

     //Attach Parsley validation to the modal input elements 
     $('#modal_div input').parsley(parsley_valiation_options); 

     //On modal submit button click, validate all the input fields 
     $('#modal_div_submit_button').click(function(event) { 
      event.preventDefault(); 

      var isValid = true; 

      $('#modal_div input').each(function(){ 
       if($(this).parsley().validate() !== true) 
        isValid = false; 
      }) 

      if(isValid) { 
       alert("All fields are validated !"); 
      } 
     }); 
    } 
}); 

HTML:

<!-- Modal --> 
<div id="modal_div"> 
    <!-- Modal div error container (Validation error messages will display here)--> 
    <div id="modal_div_error_container"></div> 


    <label for="name"> 
     Name (should be alphanumeric and min length: 7) 
    </label> 

    <input type="text" id="name" name="name" data-parsley-minlength="7" data-parsley-minlength-message="Name must be at least 7 characters" data-parsley-required="true" data-parsley-errors-container="#modal_div_error_container"/> 

    <button type="submit" id="modal_div_submit_button">Submit</button> 
</div>