Comment afficher un message d'erreur si l'utilisateur clique sur le deuxième onglet avant de remplir les données du premier onglet

Question

En cliquant sur le bouton, quatre onglets d'amorçage sont affichés et les informations de l'onglet par défaut sont affichées. Mais si l'utilisateur clique sur le deuxième onglet au lieu de remplir les informations dans le premier onglet, un message d'erreur devrait s'afficher et il ne devrait pas être autorisé à cliquer sur l'un des onglets sauf s'il remplit les informations dans le premier onglet . Après avoir renseigné les informations requises sur le premier onglet, il doit être dirigé vers le deuxième onglet et les informations renseignées par l'utilisateur dans le premier onglet doivent être enregistrées dans la base de données sur le bouton de sauvegarde, qui est là le premier languette.

Answer 1

Pour répondre à votre question, je viens d'écrire un extrait simple où vous pouvez obtenir lorsque le formulaire est rempli ou non. Inside isValid, true ou false, vous pouvez exécuter tout votre code personnalisé.

Pour activer désactiver la forme d'amorçage que je viens de supprimer ou ajouter l'onglet 'data-toggle =' "'sans ajouter de classe ou autre CSS.

Pour vérifier si le formulaire est rempli, j'ai ajouté une classe "required" pour les champs que vous souhaitez contrôler et j'ai écrit une fonction où check 'on click' event si les champs ne sont pas null.

Alternativement si vous souhaitez mettre en œuvre un plugin prêt pour revalider votre formulaire et passer moins de temps à coder votre code personnalisé bien vérifier ce lien

http://formvalidation.io/examples/bootstrap-wizard/

function validateForm() { 
 
    
 
    var isValid = true; 
 
    $('#installationForm .form-group .required').each(function() { 
 
    if ($(this).val() === '') 
 
     isValid = false; 
 
    }); 
 
    return isValid; 
 

 
} 
 

 
$('.next-tab').on('click', function(event) { 
 
    var result = validateForm(); 
 
    if (result) { 
 
    $('.next a').attr('data-toggle', 'tab'); 
 
    
 
    } else { 
 
     $('.next a').removeAttr('data-toggle'); 
 
    alert('You have to fill the form before!'); 
 
    } 
 
});

<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/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<form id="installationForm" class="form-horizontal"> 
 
    <ul class="nav nav-pills"> 
 
     <li class="active"><a href="#basic-tab" data-toggle="tab">Site information</a></li> 
 
     <li class="next"><a class="next-tab" href="#database-tab" data-toggle="tab">Database</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
     <!-- First tab --> 
 
     <div class="tab-pane active" id="basic-tab"> 
 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Site name</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="required form-control" name="name" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">URL</label> 
 
       <div class="col-xs-7"> 
 
        <input type="text" class="required form-control" name="url" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Owner email</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="required form-control" name="email" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Description</label> 
 
       <div class="col-xs-7"> 
 
        <textarea class="required form-control" name="description" rows="6"></textarea> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Second tab --> 
 
     <div class="tab-pane" id="database-tab"> 
 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Server IP</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="form-control" name="dbServer" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Database name</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="form-control" name="dbName" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Database user</label> 
 
       <div class="col-xs-5"> 
 
        <input type="text" class="form-control" name="dbUser" /> 
 
       </div> 
 
      </div> 
 

 
      <div class="form-group"> 
 
       <label class="col-xs-3 control-label">Password</label> 
 
       <div class="col-xs-5"> 
 
        <input type="password" class="form-control" name="dbPassword" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <!-- Previous/Next buttons --> 
 
     <ul class="pager wizard"> 
 
      <li class="previous"><a href="javascript: void(0);">Previous</a></li> 
 
      <li class="next"><a href="javascript: void(0);">Next</a></li> 
 
     </ul> 
 
    </div> 
 
</form> 
 

 
<div class="modal fade" id="completeModal" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog modal-sm"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
       <h4 class="modal-title">Complete</h4> 
 
      </div> 
 

 
      <div class="modal-body"> 
 
       <p class="text-center">The installation is completed</p> 
 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-success" data-dismiss="modal">Visit the website</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>