CSSのフォーム検証が正しく機能しない

フォーム検証に基づいてテキストフィールドにエフェクトを追加しようとしている登録htmlページを作成しました。CSSのフォーム検証が正しく機能しない

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="css/bootstrap.css"> 

     <!-- Optional theme --> 
     <link rel="stylesheet" href="css/bootstrap-theme.css"> 

     <script src="js/jquery.js"></script> 
     <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> 
     <!-- Latest compiled and minified JavaScript --> 
     <script src="js/bootstrap.js"></script> 
     <!-- <script src="js/FormValidation.js"></script> --> 
     <script src="https://use.fontawesome.com/b1af24592c.js"></script> 
    </head> 
    <body> 
     <div> 
       <div class="col-md-3"> 
       </div> 
       <div class="col-md-6"> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          <h3 style="text-align:center"><a style="text-decoration:none; color:#000000;" href="index.html">Form</a></h3> 
         </div> 
         <div class="panel-body"> 
          <form> 
           <div class="form-group has-feedback has-warning"> 
            <label>First Name</label> 
            <input type="text" placeholder="Your first name" class="form-control" id="firstName" required> 
            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> 
           </div> 
           <div class="form-group has-feedback has-success"> 
            <label>Last Name</label> 
            <input type="text" placeholder="Your last name" class="form-control" id="lastName" required> 
            <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
           </div> 
           <div class="form-group"> 
            <label>Email</label> 
            <input type="text" placeholder="Your email id" class="form-control" id="email" required> 
           </div> 
           <div class="form-group"> 
            <label>Password</label> 
            <input type="password" placeholder="Password" class="form-control" id="password" required> 
           </div> 
           <div class="form-group"> 
            <label>Confirm Password</label> 
            <input type="password" placeholder="Confirm your password" class="form-control" id="confirmPassword" required>[![enter image description here][1]][1] 
           </div> 
          </form> 
         </div> 
         <div class="panel-footer"> 
          <button class="btn btn-info btn-block">Register</button> 
          <h6>Already a user? <a href="#" data-toggle="modal" data-target="#modal-signin">Sign In</a></h6> 
         </div> 
        </div> 
       </div> 
     </div> 
    </body> 
</html>

このページでは、テキストボックス内にglyphicon-okとglyphicon-warningを追加します。この

よう

何かしかし、私は何を取得していますがこのです：

この問題を解決するために何ができるのか？あなたはlabel上のクラスを入れて、以下のようにdivにinputとicon spanを配置する必要があり

出典

2017-07-13 rohit1248

私は問題を再作成できるように、codepenを作成してくださいことはできますか？ https://codepen.io/pen/ –

**スニペット**デモを作成してください。 –

：

<div class="form-group has-feedback"> 
     <label for="fname" class="control-label col-md-6">First Name:</label> 
     <div class="col-md-6"> 
      <input type="text" name="fname" id="fname" class="form-control" placeholder="Enter first name" /> 
      <span class="glyphicon form-control-feedback" id="fname1"></span> 
     </div> 
    </div>

FIDDLE

は、それはあなたの問題を解決したいと考えています。

出典

2017-07-13 06:45:21

入力要素に:beforeまたは:afterを使用することはできません。私はそれの周りにspanをラップしました。これは、アイコンを表示するために入力の検証が関連するスパンに影響する必要があることを意味します。

label { 
 
    display: block; 
 
    font-weight: bold; 
 
} 
 

 
.error { 
 
    position: relative; 
 
} 
 

 
.error:after { 
 
    font-family: FontAwesome; 
 
    content: "\f071"; 
 
    position: absolute; 
 
    top: .1em; 
 
    right: .2em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<label for="name">Name</label> 
 
<span class="error"><input name="name" type="text" placeholder="name"></span>

出典

2017-07-13 06:51:08 Gerard

CSSのフォーム検証が正しく機能しない

答えて

関連する問題