0
Ich verwende Bootstrap-Validator, um sicherzustellen, dass alle Felder ausgefüllt sind, wenn Sie ein Formular abschicken. Aber mein Validator funktioniert nicht wie erwartet! HierFormularüberprüfung funktioniert nicht mit Bootstrap-Validator
ist die JSFiddle: http://jsfiddle.net/3v3011e0/
Wenn Sie mit ihm spielen und senden Sie das Formular mit allen Feldern leer, und einer von ihnen ändern, um nicht leer ist, dann werden alle Felder grün. Dies sollte nicht passieren. Es sollte nur grün für das Feld sein, das ordnungsgemäß funktioniert. Wie in diesem Bild zu sehen ist, sind Benutzername und Passwort leer, werden jedoch als grün angezeigt. Auch das Symbol wird nur für den Benutzernamen angezeigt. Wie behebe ich das?
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'
}
}
}
}
});
});