Question

我已经验证了一个form.i想在div中显示错误信息。它有红色background.i想要显示它只发生错误。但我的代码总是显示红色背景div.but错误信息显示错误我只想在出现错误时显示红色背景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

您的代码中存在一些错误。

永远不会隐藏错误div。
您正在更新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 2

首先添加

display:'none'

发生错误，接下来在发生错误时添加此jquery代码

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

此处和使用代码的示例

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 3

此外，您可以使用DIV of bootstrap alert作为自定义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>

发生错误时显示div

3 个答案: