如何在輸入表格中輸入字段是必需的

-2

我想輸出「字段是必需的」或輸入框或佔位符內的最小長度錯誤消息，並通過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>

來源

2017-11-25 Christy_mall95

這有什麼錯「必需的」屬性？ –

更改錯誤消息元素的css。在瀏覽器開發工具樣式檢查器中檢查它們並在那裏調整以測試然後更新您的樣式表 – charlietfl

您可以定義爲.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>

來源

2017-11-25 19:58:46 M0ns1f

如何在輸入表格中輸入字段是必需的

回答

相關問題