Well, as you will see how formvalidation normally works, it is placing a glyphicon as correct or incorrect as you type the email or password with its regular expression, as in this example that appears in the documentation Example , and I would like to know how to display the glyphicon when you finish writing in the input, or when you click submit .
I have not found a way to do it, I wanted to use the delay method as this part of the documentation says , but it has not worked for me.
Based on this example of the documentation: Enabling validators , I assume that is what you want, although the only thing is you have to deactivate / activate the validation in each field and this can be long if you have many in your form:
$(document).ready(function() {
$('#enableForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
full_name: {
enabled: false,
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
password: {
enabled: false,
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
}
}
},
confirm_password: {
enabled: false,
validators: {
notEmpty: {
message: 'The confirm password is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm must be the same'
}
}
}
}
})
.on('click', '[type=submit]', function() {
$('#enableForm')
.formValidation('enableFieldValidators', 'full_name')
.formValidation('enableFieldValidators', 'password')
.formValidation('enableFieldValidators', 'confirm_password');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<div class="container">
<form id="enableForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name (*)</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="full_name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">New password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Confirm password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="confirm_password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
</div>