div zeigen, wenn Fehler auftritt

Question

Ich habe ein Formular validiert.Ich möchte eine Fehlermeldung in einem div.it zeigen hat roten Hintergrund.Ich möchte es nur eine Fehler auftreten.aber mein Code zeigt immer den roten Hintergrund div. aber Fehlermeldung zeigt, wenn Fehler auftritt. Ich möchte rot Hintergrund div und Nachricht zeigen, wenn nur ein Fehler auftreten.

HTML-Code

<form action="registerphp.php" method="post" id="regfrm" name="regfrm"><br> 

    <div class="form-group" style="background-color: #FFBABA;color: #9F6000;border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center"> 
     <span id="error_message" class="text-danger"></span> 
     <span id="success_message" class="text-success"></span> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Title</label> 
     <input type="text" class="form-control" id="title" name="title"> 
    </div> 
    <div class="form-group"> 
     <label>Name</label> 
     <input type="text" class="form-control" id="name" name="name"> 
    </div> 
    <div class="form-group"> 
     <label>phone</label> 
     <input type="text" class="form-control" id="phone" name="phone"> 
    </div> 
    </form> 

jquery Code

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#buttonregister').click(function() { 
       var title=$('#title').val(); 
       var name=$('#name').val(); 
       var phone=$('#phone').val(); 

       if(title==""){ 
        $('#error_message').html("Id is required"); 
        alert('no'); 
        return false; 
          } 
       if(name==""){ 

         $('#error_message').html("Name is required"); 
         alert('no2'); 
         return false; 
         } 
        if(name==""){ 

         $('#error_message').html("Name is required"); 
         alert('no2'); 
         return false; 
         } 
       }); 
      }); 

Answer 1

Erste

hinzufügen

display:'none' 

DivFehler, fügen Sie neben diesen jQuery-Code, wenn ein Fehler

$('#errordiv').css('display','block'); 

tritt hier und Beispiel mit Ihrem Code

HTML:

<form action="registerphp.php" method="post" id="regfrm" name="regfrm"><br> 

    <div id="errordiv" class="form-group" style="display:none;background-color: #FFBABA;color: #9F6000;border: 1px solid;margin: 10px 0px;padding:15px 10px 15px 50px;background-repeat: no-repeat;background-position: 10px center"> 
     <span id="error_message" class="text-danger"></span> 
     <span id="success_message" class="text-success"></span> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Title</label> 
     <input type="text" class="form-control" id="title" name="title"> 
    </div> 
    <div class="form-group"> 
     <label>Name</label> 
     <input type="text" class="form-control" id="name" name="name"> 
    </div> 
    <div class="form-group"> 
     <label>phone</label> 
     <input type="text" class="form-control" id="phone" name="phone"> 
    </div> 
    </form> 

JavaScrip:

$(document).ready(function() { 
      $('#buttonregister').click(function() { 
       var title=$('#title').val(); 
       var name=$('#name').val(); 
       var phone=$('#phone').val(); 

       if(title==""){ 
        $('#error_message').html("Id is required"); 
        $('#errordiv').css('display','block'); 
        alert('no'); 
        return false; 
          } 
       if(name==""){ 

         $('#error_message').html("Name is required"); 
         $('#errordiv').css('display','block'); 
         alert('no2'); 
         return false; 
         } 
        if(name==""){ 

         $('#error_message').html("Name is required"); 
         $('#errordiv').css('display','block'); 
         alert('no2'); 
         return false; 
         } 
       }); 
      }); 

Answer 2

Es gibt ein paar Fehler im Code.

1. Das Fehler div ist nie ausgeblendet.
2. Sie aktualisieren das HTML, das die vorherigen Fehlermeldungen tatsächlich entfernt.

Um diese zu bewältigen, können Sie tun:

$(document).ready(function() { 
    // Hide the error div. 
    $("#error_message").hide(); 
    $('#buttonregister').click(function() { 
    var title = $('#title').val(); 
    var name = $('#name').val(); 
    var phone = $('#phone').val(); 

    // Clear the error message div. 
    $("#error_message").empty().html(""); 

    if (title == "") { 
     // 2. Change below to append. 
     $('#error_message').append("Id is required"); 
     alert('no'); 
    } 
    if (name == "") { 
     // 2. Change below to append. 
     $('#error_message').append("Name is required"); 
     alert('no2'); 
    } 
    // 3. Change this as well. Typo. 
    if (phone == "") { 
     // 2. Change below to append. 
     $('#error_message').append("Phone is required"); 
     alert('no3'); 
    } 

    // Use a separate check. 
    if ($("#error_message").text().trim().length > 10) { 
     $("#error_message").show(); 
     return false; 
    } 
    }); 
}); 

Answer 3

Außerdem können Sie DIV von Bootstrap-Alarm als eine Option der benutzerdefinierten DIV verwenden.

<label for="nome" class="col-md-3 control-label">Nome</label> 
<div class="col-md-7 inputGroupContainer">      
    <div class="input-group"> 
     <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
     <input id="nome" type="text" class="form-control" name="nome" placeholder="Filter by..."> 
    </div> 
    <div id="errordiv" style="display:none;" class="alert alert-info" role="alert"> 
     <span id="error_message_tnome" class="text-info"></span> 
    </div>       
</div> 

und JS

<script> 
$(document).ready(function(e){ 
    $("#error_message_nome").html(""); 
    $('#nome').keyup(function(e){ 
     if($(this).val().length < 3 && $(this).val().length > 0 ) { 
      $('#errordiv').css('display','block'); 
      $("#error_message_tnome").html("Tamanho mínimo 3."); 
     } else { 
      $("#error_message_tnome").html(""); 
      $('#errordiv').css('display','none'); 
     } 
    }); 
}); 
</script>