私はブートストラップバリデータを使用して、フォームの送信時にすべてのフィールドが満たされていることを確認しています。しかし、私のバリデーターは期待どおりに動作していません!フォームのバリデーションがブートストラップバリデータで動作しない
ここがJSFiddleです:あなたはそれを再生すると、空のすべてのフィールドでフォームを送信し、空でないにそれらの1つを変更した場合http://jsfiddle.net/3v3011e0/
、その後、すべてのフィールドが緑色になります。これは起こらないはずです。適切に機能しているフィールドでは緑色でなければなりません。この写真に見られるように、ユーザー名とパスワードは空ですが緑色で表示されます。また、アイコンはユーザー名のみを表示します。これをどうやって解決するのですか?
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'
}
}
}
}
});
});