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 a select field and an input text field.
Input text is required only when select tag has a selected value.
Hope someone can help.
Take a look at
In our project we are using, Backbone validator, integrated with Bootstrap
Sample of integration Backbone.validation & Bootstrap
https://jsfiddle.net/thedersen/c3kK2/
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.
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;
}
}
}
}
}
You can do that.
Before calling Bootstrap validation just add the data-required attribute to your input element if select has selected value otherwise don’t add that attribute.
Use this following code, onchange jquery function is used for this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.change();
</script>
</body>
</html>
