当发生错误时显示div

Question

我已验证form.i想要显示div.it中的错误消息有红色background.i想显示它只发生错误。但我的代码始终显示红色背景div。但是当错误发生时会显示错误信息。我只想在出现错误时显示红色背景格和消息。

HTML代码

<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代码

<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

首先添加

display:'none' 

到diverror，当错误发生时

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

这里接着加入该jQuery代码以及使用您的代码

的示例

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

有代码中的一些错误。

1. 错误div从不隐藏。
2. 您正在更新HTML，它实际上删除了以前的错误消息。

为了解决这些，你可以这样做：

$(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

此外，您还可以使用引导警报的DIV定制DIV的一个选项。

<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> 

和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>