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

Toggling field

Examples

FormValidation does not validate the fields which:

  • are disabled
  • are hidden
  • are not visible

The following example shows an example of toggling field validator.

Try to click the Add more info or Add more phone numbers button to enable/disable the additional fields. Also, look at state of the Validate button based on the validity of additional fields.

<form id="togglingForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Full name <sup>*</sup></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">Company <sup>*</sup></label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="company"
                   required data-fv-notempty-message="The company name is required" />
        </div>
        <div class="col-xs-2">
            <button type="button" class="btn btn-info btn-sm" data-toggle="#jobInfo">Add more info</button>
        </div>
    </div>

    <!-- These fields will not be validated as long as they are not visible -->
    <div id="jobInfo" style="display: none; margin-bottom: 15px;">
        <div class="form-group">
            <label class="col-xs-3 control-label">Job title <sup>*</sup></label>
            <div class="col-xs-5">
                <input type="text" class="form-control" name="job" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-3 control-label">Department <sup>*</sup></label>
            <div class="col-xs-5">
                <input type="text" class="form-control" name="department" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Mobile phone <sup>*</sup></label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="mobilePhone" />
        </div>
        <div class="col-xs-2">
            <button type="button" class="btn btn-info btn-sm" data-toggle="#phoneInfo">Add more phone numbers</button>
        </div>
    </div>

    <!-- These fields will not be validated as long as they are not visible -->
    <div id="phoneInfo" style="display: none; margin-bottom: 15px;">
        <div class="form-group">
            <label class="col-xs-3 control-label">Home phone</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" name="homePhone" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-3 control-label">Office phone</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" name="officePhone" />
            </div>
        </div>
    </div>

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

<script>
$(document).ready(function() {
    $('#togglingForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                firstName: {
                    validators: {
                        notEmpty: {
                            message: 'The first name is required'
                        }
                    }
                },
                lastName: {
                    validators: {
                        notEmpty: {
                            message: 'The last name is required'
                        }
                    }
                },
                company: {
                    validators: {
                        notEmpty: {
                            message: 'The company name is required'
                        }
                    }
                },
                // These fields will be validated when being visible
                job: {
                    validators: {
                        notEmpty: {
                            message: 'The job title is required'
                        }
                    }
                },
                department: {
                    validators: {
                        notEmpty: {
                            message: 'The department name is required'
                        }
                    }
                },
                mobilePhone: {
                    validators: {
                        notEmpty: {
                            message: 'The mobile phone number is required'
                        },
                        digits: {
                            message: 'The mobile phone number is not valid'
                        }
                    }
                },
                // These fields will be validated when being visible
                homePhone: {
                    validators: {
                        digits: {
                            message: 'The home phone number is not valid'
                        }
                    }
                },
                officePhone: {
                    validators: {
                        digits: {
                            message: 'The office phone number is not valid'
                        }
                    }
                }
            }
        })
        .on('click', 'button[data-toggle]', function() {
            var $target = $($(this).attr('data-toggle'));
            $target.toggle();
            if (!$target.is(':visible')) {
                // Enable the submit buttons in case additional fields are not valid
                $('#togglingForm').data('formValidation').disableSubmitButtons(false);
            }
        });
});
</script>