Question

我想输出＆＃34;字段是必需的＆＃34;或输入框或占位符内的minlength错误消息，框颜色通过jQuery变为红色。我的表格和验证工作正常，但是在框下方的消息显得很丑陋，并且形式有些混乱。

我的代码：

<form action="" method="POST" id="login_form">
  <div class="form-group has-feedback">
    <input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span>

  </div>
  <div class="form-group has-feedback">
    <input type="password" name="password" id= "password" class="form-control" placeholder="Password">

    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
  </div>
  <div class="row">
    <div class="col-xs-8">

    </div>
    <!-- /.col -->
    <div class="col-xs-4">
      <button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button>
    </div>
    <!-- /.col -->
  </div>
</form>

jQuery代码：

    <script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('form').validate({
            rules: {
                username: {
                    required: true,
                    minlength: 5
                },
                password: {
                    required: true,
                    minlength: 5
                },

            },
                    });
    });
</script>

Answer 1

您可以为.error类定义css，然后在onkeyup上检测input.error以删除错误标签，请参阅代码段：

$(document).ready(function() {
            $('form').validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 5
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
    
                },
                        });
                        $(document).on("keyup", "input.error", function(){
    $("label[for='"+$(this).attr('id')+"']").hide();
});
        });

.form-group {
position:relative;
}
label.error{
position:absolute;
top:0px;
left:0px;
background-color:#fff;
color:red;
}
input.error{
border:1px solid red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
<form action="" method="POST" id="login_form">
      <div class="form-group has-feedback">
        <input type="username" name="username" id="username" class="form-control" placeholder="username" ><span class="glyphicon glyphicon-envelope form-control-feedback"></span>

      </div>
      <div class="form-group has-feedback">
        <input type="password" name="password" id= "password" class="form-control" placeholder="Password">

        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">

        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" class="btn btn-primary btn-block btn-flat"name="login">Sign In</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

输入表格中需要如何输出字段

1 个答案: