How to create a custom validation in Bootstrap Validation
Solution 1
Take a look at
In our project we are using, Backbone validator, integrated with Bootstrap
Sample of integration Backbone.validation & Bootstrap
[jsfiddle.net/thedersen/c3kK2/][1]
That is if you are using Backbone :)
For bootstrapvalidator there is a callback method for validation
http://bootstrapvalidator.com/validators/callback/
From example:
<input type="text" class="form-control" name="captcha"
data-bv-callback="true"
data-bv-callback-message="Wrong answer"
data-bv-callback-callback="checkCaptcha" />
And JS
function checkCaptcha(value, validator) {
// Determine the numbers which are generated in captchaOperation
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
};
$(document).ready(function() {
// Return a random number between min and max
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
// Generate a sum of two random numbers
function generateCaptcha() {
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
};
generateCaptcha();
$('#callbackForm').bootstrapValidator();
});
You can implement arbitrary validation with it.
So your validation can be implemented through some global function
With HTML
<input type="text" class="form-control" name="captcha"
data-bv-callback="true"
data-bv-callback-message="Wrong answer"
data-bv-callback-callback="specialValidation" />
with JS
function specialValidation(value, validator) {
// Determine the numbers which are generated in captchaOperation
var items = $('#otherField').txt();
return value == sum;
};
And you need to be creative with element attributes, to link related elements correctly.
Solution 2
Use callback for custom validation you can use any validation on callback like javascript validation.Need to send false or true.
pwd:
{
validators:
{
notEmpty:
{
message: 'The password is required and cannot be empty'
},
callback:
{
message: 'The password is not valid',
callback: function(value, validator, $field)
{
if (value === '')
{
return true;
}
}
}
}
}
![Andoy Abarquez](https://i.stack.imgur.com/H7RWN.jpg?s=256&g=1)
Andoy Abarquez
Java Web Developer Odoo Functional Consultant & Developer
Updated on August 24, 2020Comments
-
Andoy Abarquez almost 4 years
My Goal is to validate a specific text field where this field is dependent to the value of the other element.
For example i have select tag and input text tag,
input text is required when select tag has a selected value.
hope someone could help.