I'm using the formValidation plugin located here to perform input validation check on a HTML5 form. The error validation works fine but now I have a case where I need to provide a warning instead of an error on an input validation, where the user can still proceed with a submit if invalid.
I've done a quick search on the topic but didn't find anything worthwhile which is why I'm posting here for advice.
Question:
How can I validate with a warning using the formValidation plugin?
HTML input -
<input id="ApplicationID" name="Application" required="required" type="text" class="form-control">
Code -
//Validate the required input fields to prevent submit if not
//populated.
$('#createForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Application: {
validators: {
notEmpty: {
message: 'The idVal name field is required'
},
callback: {
message: 'A record for this Application type already exists!',
callback: function (value, validator, $field) {
// Determine if the input idVal already exists
var idVal = $('#ApplicationID').val();
//Check that idVal isn't empty before calling match validation
if(idVal )
{
//Call a bool method to check if idVal already exists
return checkEPRIDExists(idVal );
}
}
}
}
}
}
});
The current validation prevents submit and highlights red, looking for an amber warning instead that allows submit if invalid:
Not sure how you ended up going with this one since it was a while ago.
Here's an example which details how to implement a Warning for a field (instead of just an error or success).
I think the key thing is that you've got to add the events to trigger on either success
or error
within formValidation.
$('#createForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Application: {
validators: {
notEmpty: {
message: 'The idVal name field is required'
},
callback: {
message: 'A record for this Application type already exists!',
callback: function (value, validator, $field) {
// Determine if the input idVal already exists
var idVal = $('#ApplicationID').val();
//Check that idVal isn't empty before calling match validation
if(idVal )
{
//Call a bool method to check if idVal already exists
return checkEPRIDExists(idVal );
}
}
}
}
}
}
})
// This event will be triggered when the field passes given validator
.on('success.validator.fv', function(e, data) {
// data.field --> The field name
// data.element --> The field element
// data.result --> The result returned by the validator
// data.validator --> The validator name
if (data.field === 'Application'
&& data.validator === 'callback'
&& (data.fv.isValidField('Application'))){
// The Application field passes the callback validator
data.element // Get the field element
.closest('.form-group') // Get the field parent
// Add has-warning class
.removeClass('has-success')
.addClass('has-warning')
// Show message
.find('small[data-fv-validator="callback"][data-fv-for="Application"]')
.show();
}
})
// This event will be triggered when the field doesn't pass given validator
.on('err.validator.fv', function(e, data) {
// Removes the has-warning class when it doesn't pass any validator
if (data.field === 'Application') {
data.element
.closest('.form-group')
.removeClass('has-warning');
}
});