2

Bootstrap 3.3.4 と formvalidation 0.6.1 を使用しています。エラー formvalidation.io を表示するには、display .help-block が必要です (私は .form-horizo​​ntal を使用します)。

使用しようとしました（サービス外）：

.help-block {
    display: inline;
}

私のフォーム：

<form class="form-horizontal" method="post" action=""   id="formProfile">   

<div class="form-group">
<label for="email" class="col-sm-3 control-label">E-mail</label>
<div class="col-sm-4">
<input name="email" id="email" 
type="email" class="form-control"
>
</div></div>

<div class="form-group">
<label for="nick" class="col-sm-3 control-label">Nick</label>
<div class="col-sm-4">
<input name="nick" id="nick" 
type="text" class="form-control"
>
</div></div>

</form>

右側に表示されるエラーをどのように作成しますか?

4

2 に答える 2

0

入力を含む div の後、 div.form-group の終わりの前にhelp-inlineブロックを配置します。

<div class="form-group">
  <label for="nick" class="col-sm-3 control-label">Nick</label>
  <div class="col-sm-4">
    <input name="nick" id="nick" type="text" class="form-control" >
  </div>
  <span class="help-block">This is Errors</span>
</div>
于 2015-04-03T09:50:19.873 に答える
0

FormValidation のerr.containerオプションを使用すると、さまざまなオプションでメッセージ領域を定義できます: * CSS セレクター * コールバック * ツールチップ * ポップオーバー

あなたの場合、コールバックを使用してメッセージ領域を示すことができます。

HTML コード:

<div class="form-group">
    <label for="email" class="col-sm-3 control-label">E-mail</label>
    <div class="col-sm-4">
        <input name="email" id="email" type="email" class="form-control">
    </div>

    <!-- The messages are shown here -->
    <div class="col-sm-5 messageContainer"></div>   
</div>

<div class="form-group">
    <label for="nick" class="col-sm-3 control-label">Nick</label>
    <div class="col-sm-4">
        <input name="nick" id="nick" type="text" class="form-control">
    </div>

    <!-- The messages are shown here -->
    <div class="col-sm-5 messageContainer"></div>
</div>

Javascript:

$('#formProfile').formValidation({
    framework: 'bootstrap',
    err: {
        container: function($field, validator) {
            // Look at the markup
            //  <div class="col-sm-4">
            //      <field>
            //  </div>
            //  <div class="col-sm-5 messageContainer"></div>
            return $field.parent().next('.messageContainer');
        }
    }
    ...
});

結果は次の図のようになります。

右側にメッセージを表示

カスタム エリアにメッセージを表示する例にも、より役立つ例が示されています。

于 2015-04-07T04:12:47.560 に答える