bugfix> javascript > 投稿

私はWeb開発に不慣れです。これで私のコードは次のようになります->

<form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
                    <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username"
                            value="" placeholder="username or email" required>
                    </div>
                    <div ng-show="loginForm.username.$error.pattern">
                        <span class="jdIdError-Color">Please use Lower case charchters</span>
                    </div>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required
                            placeholder="password">
                    </div>
                    <div style="margin-top:10px" class="form-group">
                        <!-- Button -->
                        <div class="col-sm-12 controls">
                            <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid"
                                data-ng-click="isLoading=true;submit(loginForm)">
                                    <span ng-hide="hideSpinner"
                                       class="loginContainer-spinner">
                                     <i class="fa fa-spin fa-refresh"></i>
                                   </span>
                                <span class="text-white"><strong>Login</strong></span>
                            </button>
                            <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>-->
                        </div>
                    </div>
                </form>

だから、エラーメッセージを出すと、このようになります

ここでdivを削除しましたが、マージンを使用してそのメッセージを少し上げようとしたときに発生しません。そう、

回答 3 件
  • 入力グループdivからエラーdivを移動します。

    <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
      <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
      <div style="margin-bottom: 25px" class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
        <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required>
      </div>
      <div ng-show="loginForm.username.$error.pattern">
        <span class="jdIdError-Color">Please use Lower case charchters</span>
      </div>
    </form>
    
    

  • 入力グループクラスからエラーdivを削除

    <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
        <div ng-show="errorMessage" class="compact-container alert text-center alert-danger col-xs-12"> {{errorMessage}}</div>
        <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username"
            value="" placeholder="username or email" required>
            
        </div>
        <div ng-show="loginForm.username.$error.pattern">
           <span class="jdIdError-Color">Please use Lower case charchters</span>
        </div>
    
    

  • ブートストラップは、検証エラー用の「help-block」クラスを提供します。 したがって、「input-group」をフォームグループにラップする必要があります。addクラス「help-block」をスパンに追加します。

    以下の例をご覧ください

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> ​
    <div class="container">
      <form name="loginForm" id="loginform" class="form-horizontal" role="form" novalidate>
        ​
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">
                        <i class="glyphicon glyphicon-user"></i>
                    </span>
            <input id="login-username" type="text" class="form-control" name="username" ng-pattern="/^[a-z0-9]*$/" data-ng-model="formInfo.username" value="" placeholder="username or email" required>
          </div>
          <div ng-show="loginForm.username.$error.pattern">
            <span class="jdIdError-Color help-block">Please use Lower case charchters</span>
          </div>
          ​
        </div>
        <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">
                        <i class="glyphicon glyphicon-lock"></i>
                    </span>
            <input id="login-password" type="password" class="form-control" data-ng-model="formInfo.password" name="password" required placeholder="password">
          </div>
          <div style="margin-top:10px" class="form-group">
            <!-- Button -->
            ​
            <div class="col-sm-12 controls">
              <button type="submit" class="btn btn-info login-button-position" id="loginBtn" name="loginBtn" ng-disabled="!loginForm.$valid" data-ng-click="isLoading=true;submit(loginForm)">
                            <span ng-hide="hideSpinner" class="loginContainer-spinner">
                                <i class="fa fa-spin fa-refresh"></i>
                            </span>
                            <span class="text-white">
                                <strong>Login</strong>
                            </span>
                        </button>
              <!--<a id="btn-login" href="#" class="btn btn-success" data-ng-click="isLoading=true;submit(loginForm)">Login </a>-->
            </div>
          </div>
      </form>
      </div>
    
    

あなたの答え