0

私はブートストラップバリデータを使用して、フォームの送信時にすべてのフィールドが満たされていることを確認しています。しかし、私のバリデーターは期待どおりに動作していません!フォームのバリデーションがブートストラップバリデータで動作しない

ここ

がJSFiddleです:あなたはそれを再生すると、空のすべてのフィールドでフォームを送信し、空でないにそれらの1つを変更した場合http://jsfiddle.net/3v3011e0/

、その後、すべてのフィールドが緑色になります。これは起こらないはずです。適切に機能しているフィールドでは緑色でなければなりません。この写真に見られるように、ユーザー名とパスワードは空ですが緑色で表示されます。また、アイコンはユーザー名のみを表示します。これをどうやって解決するのですか?

enter image description here

HTML

<form action="#" method="POST" id="myForm"> 
    <div class="form-group"> 

    <input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" /> 

    <input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" /> 

    <select id="myPicker" name="num" class="selectpicker form-control"> 
     <option value="" selected="selected">Select number</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    </div> 

    <div class="text-center"> 
    <button type="submit" class="btn btn-primary">submit</button> 
    </div> 
</form> 

Javascriptを

$(document).ready(function() { 
    $('#myForm').bootstrapValidator({ 
    feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
     username: { 
     validators: { 
      notEmpty: { 
      message: 'The username is required and cannot be empty' 
      } 
     } 
     }, 
     password: { 
     validators: { 
      notEmpty: { 
      message: 'The password is required and cannot be empty' 
      } 
     } 
     }, 
     num: { 
     validators: { 
      notEmpty: { 
      message: 'Number is required and cannot be empty' 
      } 
     } 
     } 
    } 
    }); 
}); 

答えて

0

私は、これは古い質問です知っているが、それは付属のように私はこのプラグイン、bootstrapValidatorの古いバージョンで働いていました私が使っていたテーマ、SmartAdmin

まず、このプラグインには2つのバージョンがあります。

formvalidation.io(有料版)、bootstrapValidator(アップ.5.2までの無料版、?)

とにかく、彼らは異なっており、ドキュメントはあなたが正しいのためのドキュメントを使用していることを確認してください異なります。

このユーザーが抱いている問題は、HTMLマークアップが間違っていることです。プラグインのデフォルトの初期化を使用するときは、各フィールドをクラス ".form-group"で区切る必要があります。

<div class="form-group"> 
    <input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" /> 
</div> 
<div class="form-group"> 
    <input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" /> 
</div> 
<div class="form-group"> 
    <select id="myPicker" name="num" class="selectpicker form-control"> 
     <option value="" selected="selected">Select number</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
</div> 

http://jsfiddle.net/3v3011e0/7/

これが不可能な場合は、複雑なフォームの例の初期化をエミュレートしてみてください。 http://bootstrapvalidator.votintsev.ru/examples/complex-form/

関連する問題