Modifying the value before validating
← Examples
By default, the value of field will be taken by using jQuery's val() method.
In some case, you might want to adjust the value before performing validations. For example, the numeric validator doesn't allow to use a comma (,) for thousand separator.
Fortunately, it's now possible to hook the value of field via the transformer option. The following piece of code is an usage of this option:
$(form).formValidation({
fields: {
fieldName: {
validators: {
validatorName: {
transformer: function($field, validatorName, validator) {
// $field is the jQuery object presenting the field element
// validatorName is the name of current validator (numeric)
// validator is the instance of plugin
var value = $field.val();
// Adjust the value
// ...
// and return new value
return value;
}
}
}
}
}
});The next sections introduce some examples demonstrating how to apply this option for popular validators.
Using with the numeric validator
By default, the numeric validator doesn't accept the comma.
In the form below, the Price field now accepts value using comma for thousand separator, such as 12,570.634
<form id="productForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Price</label>
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" name="price" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number',
transformer: function($field, validatorName, validator) {
var value = $field.val();
return value.replace(',', '');
}
}
}
}
}
});
});
</script>Using with the phone validator
The phone validator supports phone number in various countries. Despite the fact that it try to support many possible formats of a phone number, it can't cover all or special one which you want it to be a valid phone number.
For instance, a number containing the spaces such as XXX XXX XXXX (where X presents a digit from 0-9) is treated as invalid US phone number.
By using the transformer option, we can turn this kind of number into a valid one by removing all spaces.
<form id="profileForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">US phone number</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#profileForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
phoneNumber: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
phone: {
message: 'The phone number is not valid',
country: 'US',
transformer: function($field, validatorName, validator) {
var value = $field.val();
// Check if the value has format of XXX XXX XXXX
if (/^(\d){3}(\s+)(\d){3}(\s+)(\d){4}$/.test(value)) {
// Remove all spaces
return value.replace(/\s/g, '');
}
// Otherwise, return the original value
return value;
}
}
}
}
}
});
});
</script>Using with WYSIWYG editors
WYSIWYG stands for What You See Is What You Get. A WYSIWYG editor provides a visual way to edit the content of input which mostly is a textarea element. TinyMCE, CKEditor, Summernote are some popular one.
Since these editors usually generate additional HTML tags, the raw content of input might be different with the value returned by the editor. The notEmpty, stringLength validators maybe don't work correctly with the field using a WYSIWYG editor.
The following form uses the transformer option to get raw text of the editor before doing validations.
<!-- Include TinyMCE js -->
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<form id="articleForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Post title</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Post content</label>
<div class="col-xs-9">
<textarea class="form-control" name="content" style="height: 200px;"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-6 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('keyup', function(e) {
// Revalidate the content field
$('#articleForm').formValidation('revalidateField', 'content');
});
}
});
$('#articleForm').formValidation({
framework: 'bootstrap',
excluded: [':disabled'],
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required'
}
}
},
content: {
// Use the same transformer for all validators
transformer: function($field, validatorName, validator) {
// Get the plain text without HTML
var text = tinyMCE.activeEditor.getContent({
format: 'text'
});
return text;
},
validators: {
notEmpty: {
message: 'The content is required'
},
stringLength: {
message: 'The content must be more than 10 and less than 500 characters',
min: 10,
max: 500
}
}
}
}
});
});
</script>