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

notEmpty validator

Return true if the value contains only digits

← Validators

Options

Option HTML attribute Type Description
message data-fv-notempty-message String The error message
When setting options via HTML attributes, remember to enable the validator by setting data-fv-notempty="true".
You don't need to do that when using HTML 5 required attribute.
The message option can be updated on the fly via the updateMessage() method

If you want the field to be required based on particular field or conditions, look at the Conditional validation example.

Using with select element

If you want a select element to be required, you have to set value="" for the option which is treated as empty one:

<select name="gender">
    <option value="">Select the gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
</select>

Using with WYSIWYG editor

Most of WYSIWYG (What You See Is What You Get) editors generate some HTML tags for an empty string. So, basically, you can't use notEmpty validator to validate a text area which uses a WYSIWYG editor.

Instead, use the callback validator to get the raw HTML string, and check if it's the default value generated by the editor, then it's empty field.

Looking at some ejemplos below will give you the idea:

Showing mandatory icon

Showing mandatory icon for required field gives better user experience. You can do it with

ejemplos

Basic example

In the following form, user is asked to enter the full name.

<form id="notEmptyForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="fullName" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#notEmptyForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            fullName: {
                validators: {
                    notEmpty: {
                        message: 'The full name is required'
                    }
                }
            }
        }
    });
});
</script>
<form id="notEmptyForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="fullName"
                data-fv-notempty="true"
                data-fv-notempty-message="The full name is required" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#notEmptyForm').formValidation();
});
</script>

HTML 5 example

Below is an example of using HTML 5 required attribute to enable the notEmpty validator.

<form id="signInForm" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username"
                required
                data-fv-notempty-message="The username is required" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password"
                required
                data-fv-notempty-message="The password is required" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-6 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#signInForm').formValidation();
});
</script>

Related validators

The following validators might be useful to you:

← meid validator numeric validator →