Jquery 发生错误时显示div

我已经验证了一个表单。我想在一个div中显示错误消息。它有红色背景。我想只在发生错误时显示它。但我的代码始终显示红色背景div。但错误消息在发生错误时显示。我想在只发生错误时显示红色背景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;
                         }
                 });
            });

$（文档）.ready（函数（）{
$（“#按钮注册”）。单击（函数（）{
var title=$（'#title'）.val（）；
var name=$（'#name'）.val（）；
var phone=$（'#phone'）.val（）；
如果（标题==“”）{
$（'#错误消息'）.html（“需要Id”）；
警告（“否”）；
返回false；
}
如果（名称==“”）{
$（'#错误消息'）.html（“需要名称”）；
警报（“no2”）；
返回false；
}
如果（名称==“”）{
$（'#错误消息'）.html（“需要名称”）；
警报（“no2”）；
返回false；
}
});
});

您的代码中有一些错误

错误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;
    }
  });
});

第一加

display:'none'

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

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

下面是使用您的代码的示例

HTML:

---

此外，还可以使用引导警报的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>

Nome

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

$（文档）.ready（函数（e）{
$（“#错误消息名称”）.html（“”）；
$（'#nome'）.keyup（函数（e）{
如果（$（this.val（）.length<3&$（this.val（）.length>0）{
$（'#errordiv'）.css（'display'，'block'）；
$（“#error#u message_tnome”）.html（“Tamanho mínimo 3”）；
}否则{
$（“#错误信息_tnome”）.html（“”）；
$（'#errordiv'）.css（'display'，'none'）；
}
});
});

if语句中有两条完全相同。还可以尝试使用if{}else if{}格式

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

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