This site contains the document for old version. Please upgrade to the latest version v1.0.0

Preventing user to have same value as the placeholder

This example shows a few ways to prevent user to put the same value as the placeholder attribute.

For instance, we could show an error message when someone enters First name or Last name for the text fields named firstName and lastName, respectively.

Using callback validator

The first approach is to use the callback validator:

$('#contactForm').formValidation({
    fields: {
        message: {
            validators: {
                callback: {
                    message: 'The value cannot be the same as placeholder',
                    callback: function(value, validator, $field) {
                        return value != $field.attr('placeholder');
                    }
                }
            }
        }
    }
});

As you saw, the field passes the callback validator if its value (you can use the value passed as a parameter of callback, or $field.val()) is different than its placeholder attribute which can be accessed as $field.attr('placeholder').

Creating a custom validator

It's also possible for you to develop a custom validator for that purpose and reuse it whenever you want.

The following code snippet creates a validator named placeholder (of course, you can change it):

FormValidation.Validator.placeholder = {
    validate: function(validator, $field, options) {
        return $field.attr('placeholder') != $field.val();
    }
};

Now, you can apply the created validator with multiple fields:

$('#contactForm').formValidation({
    fields: {
        firstName: {
            validators: {
                // Using a custom validator named 'placeholder' created above
                placeholder: {
                    message: 'The value cannot be the same as placeholder'
                }
            }
        },
        lastName: {
            validators: {
                // Using a custom validator named 'placeholder' created above
                placeholder: {
                    message: 'The value cannot be the same as placeholder'
                }
            }
        }
    }
});

You should take a look at the developing page to see more details and usages on creating your own validator

The following form uses both approaches which are described above:

<form id="contactForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Message</label>
        <div class="col-xs-9">
            <textarea class="form-control" name="message" rows="7" placeholder="Message"></textarea>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    FormValidation.Validator.placeholder = {
        validate: function(validator, $field, options) {
            return $field.attr('placeholder') != $field.val();
        }
    };

    $('#contactForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    },
                    // Using a custom validator named 'placeholder' created above
                    placeholder: {
                        message: 'The value cannot be the same as placeholder'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    },
                    // Using a custom validator named 'placeholder' created above
                    placeholder: {
                        message: 'The value cannot be the same as placeholder'
                    }
                }
            },
            message: {
                validators: {
                    notEmpty: {
                        message: 'The message is required'
                    },
                    stringLength: {
                        max: 700,
                        message: 'The message must be less than 700 characters long'
                    },
                    // Using the callback validator
                    callback: {
                        message: 'The value cannot be the same as placeholder',
                        callback: function(value, validator, $field) {
                            return value != $field.attr('placeholder');
                        }
                    }
                }
            }
        }
    });
});
</script>