web-dev-qa-db-fra.com

Validation du formulaire en cliquant sur le bouton Suivant à l’aide de bootstrap nav-pill

J'utilise nav-pill dans lequel il y a un formulaire et qui est divisé en chaque partie, par exemple les détails d'admission, les détails personnels, les détails relatifs à la famille avec le bouton "Suivant" à chaque étape et le bouton d'enregistrement au dernier nav-pill.

$('.btnNext').click(function() {
  $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-pills > .active').prev('li').find('a').trigger('click');
});

//  Bind the event handler to the "submit" JavaScript event
$('#validateFirst').click(function() {

  // Get the Login Name value and trim it
  var name = $.trim($('#admission_no').val());

  // Check if empty or not
  if (name === '') {
    alert('Admission No. field is empty.');
    return false;
  }
});
<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>

<ul class="nav nav-pills nav_content">
  <li class="active"><a data-toggle="pill" href="#admission">Admission Details</a></li>
  <li><a data-toggle="pill" href="#personal">Personal Details</a></li>
  <li><a data-toggle="pill" href="#family">Family Details</a></li>
</ul>

<form id="form1" action="<?php echo site_url('student/create') ?>" id="employeeform" name="employeeform" method="post" accept-charset="utf-8" enctype="multipart/form-data">
  <div class="tab-content">
    <div id="admission" class="tab-pane fade in active">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Admission Number *</label>
            <input id="admission_no" name="admission_no" placeholder="" type="text" class="form-control" value="admission_no" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Application Number  *</label>
            <input id="application_no" name="application_no" placeholder="" type="text" class="form-control" value="application_no" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Academic Year  *</label>
            <input id="academic_year" name="academic_year" placeholder="" type="text" class="form-control" value="academic_year" />
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnNext pull-right" id="validateFirst">Next</a>
    </div>
    <div id="personal" class="tab-pane fade">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">First Name *</label>
            <input id="firstname" name="firstname" placeholder="" type="text" class="form-control" value="firstname" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">DOB *</label>
            <input id="dob" name="dob" placeholder="" type="text" class="form-control" value="DOB" readonly="readonly" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputFile">Address  *</label>
            <textarea id="student_address" name="student_address" placeholder="" class="form-control" rows="2"></textarea>
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnPrevious pull-left">Previous</a>
      <a class="btn btn-primary btnNext pull-right">Next</a>
    </div>
    <div id="family" class="tab-pane fade">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Father Name *</label>
            <input id="father_name" name="father_name" placeholder="" type="text" class="form-control" value="father_name" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Father Occupation *</label>
            <input id="father_occupation" name="father_occupation" placeholder="" type="text" class="form-control" value="father_occupation" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Mother Name *</label>
            <input id="mother_name" name="mother_name" placeholder="" type="text" class="form-control" value="mother_name" />
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnPrevious pull-left">Previous</a>
      <button type="submit" class="btn btn-info pull-right">Save</button>
    </div>
  </div>
</form>

J'ai essayé avec la fonction de clic sur le bouton en cliquant sur le bouton "Suivant" comme:

$('#validateFirst').click(function () {
    // Get the Login Name value and trim it
    var name = $.trim($('#admission_no').val());
    // Check if empty of not
    if (name === '') {
        alert('Text-field is empty.');
        return false;
    }
});

Où le bouton a id "validateFirst",

<a class="btn btn-primary btnNext pull-right" id="validateFirst">Next</a>

Ici, alert apparaît lorsque aucune entrée n’est renseignée mais que vous passez à l’onglet suivant ( c’est-à-dire ) en cliquant sur le bouton suivant. La chose dont je suis dans le besoin est en cliquant sur le bouton suivant si les champs dans les champs actuels de nav-pill sont vides (disons que le champ admission n est pas renseigné dans la première pilule de navigation) et en cliquant sur le bouton suivant, il devrait afficher une alerte et ne devrait pas bouger au prochain nav-pill pour rectifier les champs de saisie invalides dans la pilule de navigation actuelle .. J'ai jeté un coup d'œil aux autres questions, mais je n'ai pas pu obtenir de solution claire. Aidez-moi à trouver une solution pour résoudre ce problème.

javascriptphpjquerytwitter-bootstrap
7
Maniraj from Karur

Vous pouvez le faire comme ça:

$('.pull-right').click(function () {
    var validationMessage = '';

    // Check inputs are filled.
    $.each($(this).closest('.tab-pane').find('input[type="text"]'), function () {
        if ($(this).val() == '') 
            validationMessage += "Please fill " + $(this).closest('.form-group').find('label').html().replace('*', '') + "\n";           
    });

    // Validation is false
    if (validationMessage != '')
        alert(validationMessage);
    else
        $('.nav-pills > .active').next('li').find('a').trigger('click');
});

Démo en ligne (jsFiddle)

5
Ali Soltani

Vous avez déjà un gestionnaire d’événements sur le '.btn-next' La définition d’un autre gestionnaire d’événements sur le même élément n’exécutera que les deux dans l’ordre dans lequel vous avez attaché le gestionnaire d’événements. phase et phase de capture, mais cela ne fonctionnera que si vous utilisez addEventListener.)

Solution 1: 

Vous pouvez définir une variable booléenne, lui attribuer le statut de validation et vérifier son statut avant de déclencher l'événement click sur la prochaine pilule.

Dans cette approche, l'ordre dans lequel vous liez les gestionnaires d'événements est important.

Ci-joint la solution sous forme d'extrait de code intégré 

Remarque: cette solution n’est ni évolutive ni maintenable et c’est trop naïf.

Solution 2:

La solution alternative est que vous devez vous assurer de tout valider dans une seule fonction, lire le statut et déclencher l'événement de pilule de navigation.

https://jsfiddle.net/8b7pq08a/

Remarque: Si vous souhaitez ajouter plusieurs validations telles que checkEmpty, vous devez apporter des modifications à "listOfRequiredFields". La convertir en objet avec des fonctions de validation en tant que valeur vous aidera à identifier les fonctions à exécuter sur le champ. [UPDATE]

Utilisation de l'extrait de code de la question au lieu de violon.

 var validationStatus = true;
 
//  Bind the event handler to the "submit" JavaScript event
$('#validateFirst').click(function() {

  // Get the Login Name value and trim it
  var name = $.trim($('#admission_no').val());

  // Check if empty or not
  if (name === '') {
    alert('Admission No. field is empty.');
     validationStatus = false;
   }
});

$('.btnNext').click(function() {
if(validationStatus)  $('.nav-pills > .active').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  if(validationStatus) $('.nav-pills > .active').prev('li').find('a').trigger('click');
});
<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>

<ul class="nav nav-pills nav_content">
  <li class="active"><a data-toggle="pill" href="#admission">Admission Details</a></li>
  <li><a data-toggle="pill" href="#personal">Personal Details</a></li>
  <li><a data-toggle="pill" href="#family">Family Details</a></li>
</ul>

<form id="form1" action="<?php echo site_url('student/create') ?>" id="employeeform" name="employeeform" method="post" accept-charset="utf-8" enctype="multipart/form-data">
  <div class="tab-content">
    <div id="admission" class="tab-pane fade in active">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Admission Number *</label>
            <input id="admission_no" name="admission_no" placeholder="" type="text" class="form-control" value="admission_no" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Application Number  *</label>
            <input id="application_no" name="application_no" placeholder="" type="text" class="form-control" value="application_no" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Academic Year  *</label>
            <input id="academic_year" name="academic_year" placeholder="" type="text" class="form-control" value="academic_year" />
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnNext pull-right" id="validateFirst">Next</a>
    </div>
    <div id="personal" class="tab-pane fade">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">First Name *</label>
            <input id="firstname" name="firstname" placeholder="" type="text" class="form-control" value="firstname" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">DOB *</label>
            <input id="dob" name="dob" placeholder="" type="text" class="form-control" value="DOB" readonly="readonly" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputFile">Address  *</label>
            <textarea id="student_address" name="student_address" placeholder="" class="form-control" rows="2"></textarea>
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnPrevious pull-left">Previous</a>
      <a class="btn btn-primary btnNext pull-right">Next</a>
    </div>
    <div id="family" class="tab-pane fade">
      <div class="row">
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Father Name *</label>
            <input id="father_name" name="father_name" placeholder="" type="text" class="form-control" value="father_name" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Father Occupation *</label>
            <input id="father_occupation" name="father_occupation" placeholder="" type="text" class="form-control" value="father_occupation" />
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group">
            <label for="exampleInputEmail1">Mother Name *</label>
            <input id="mother_name" name="mother_name" placeholder="" type="text" class="form-control" value="mother_name" />
          </div>
        </div>
      </div>
      <a class="btn btn-primary btnPrevious pull-left">Previous</a>
      <button type="submit" class="btn btn-info pull-right">Save</button>
    </div>
  </div>
</form>

2
karthick

La validation du formulaire devrait impliquer plus que simplement vérifier si un champ est rempli ou non. Pour cette raison, vous devez utiliser Ajax pour soumettre les données pertinentes au serveur et utiliser la validation de formulaire côté serveur.

En haut de votre page, ajoutez un div masqué pour afficher les erreurs de validation:

<div class="alert alert-danger col-xs-12 hidden" id="error"></div>

Ajoutez une classe "validate" partagée à tous les boutons qui déclencheront la validation de votre formulaire. Nous aurons trois ensembles distincts de logique de validation. Indiquez au champ un identifiant correspondant au nom de la fonction (par exemple, "validate_1", "validate_2", etc.).

<a class="btn btn-primary btnNext pull-right validate" id="validate_1">Next</a>
<a class="btn btn-primary btnNext pull-right validate" id="validate_2">Next</a>

Mettez à jour votre jQuery pour inclure la fonction Ajax POST. Cette fonction soumet des données au serveur sur lequel vous pouvez utiliser la validation de formulaire native de Codeigniter:

$('.btnPrevious').click(function() {
  $('.nav-pills > .active').prev('li').find('a').trigger('click');
});


$(document).on('click','.validate',function(e){
    e.preventDefault();
    if($('#error').is(":visible")){
        $('#error').empty().addClass('hidden'); //refresh error message if it was triggered previously
    }
    var form = $(this).closest('form');
    $.ajax({        
        url: this.id,
        type: 'POST',
        data: form.serialize(),
        dataType: 'html',
        success: function(data) {
            var result = $.parseJSON(data);
            if(result["error"]===undefined){
                $('.nav-pills > .active').next('li').find('a').trigger('click');
            }else{
                $('#error').append(result["error"]).removeClass('hidden');
            }
        },
        error: function() { }
    });
});

Et puis dans votre contrôleur:

function validate_1(){ //function name matches element id
    $this->load->library('form_validation');    
    $this->form_validation->set_rules('admission_no', 'Admission Number', 'required|integer|greater_than[0]');
    $this->form_validation->set_rules('application_no', 'Application Number', 'required|integer|greater_than[0]');
    $this->form_validation->set_rules('academic_year', 'Academic Year', 'required|integer|greater_than[0]');
    if($this->form_validation->run() == TRUE){
         echo json_encode(array('success' => 1));
    }else{
        echo json_encode(array('error' =>  validation_errors()));
    }
}

function validate_2(){
    $this->load->library('form_validation');    
    $this->form_validation->set_rules('firstname', 'First Name', 'required');
    $this->form_validation->set_rules('dob', 'Date of Birth', 'required');
    $this->form_validation->set_rules('student_address', 'Address', 'required');
    if($this->form_validation->run() == TRUE){
        echo json_encode(array('success' => 1));
    }else{
        echo json_encode(array('error' =>  validation_errors()));
    }
}

Cela vous permettra de vérifier que les données ont été soumises et qu'elles sont valides. L'utilisateur pourra toujours cliquer lui-même pour naviguer d'une pilule de navigation à l'autre, mais il ne pourra pas soumettre le formulaire sans remplir les champs nécessaires. 

 enter image description here

2
Dan