FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

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 transformer option only adjusts the field value and uses the modified value for validating. It does NOT send the modified value to the server when submitting the form

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>

Related example