Skip to main content

Mandatory fields

Mandatory fields

This code will show required icons () for fields using the "not empty" validator.

Form validation script is required for this feature to work. Read more about form validation.

Basic usage


$(document).ready(function() {
    $('#productForm').formValidation({
        addOns: {
          mandatoryIcon: {
            icon: 'fa fa-asterisk'
          }
        },
        fields: {
          fieldName :{
            validators: {
              notEmpty: {
                message: 'The name is required'
              },
              ...
            }
          },
          ...
        }
    });
});

It's also possible to call the add-on in a declarative way.

Example

See JavaScript setup.


$('#productForm').formValidation({
    addOns: {
        mandatoryIcon: {
            icon: 'fa fa-asterisk'
        }
    },
    fields: {
        name: {
            validators: {
                notEmpty: {
                    message: 'The name is required'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The name must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_]+$/,
                    message: 'The username can only consist of alphabetical, number and underscore'
                }
            }
        },
        price: {
            validators: {
                notEmpty: {
                    message: 'The price is required'
                },
                numeric: {
                    message: 'The price must be a number'
                }
            }
        },
        'size[]': {
            validators: {
                notEmpty: {
                    message: 'The size is required'
                }
            }
        },
        availability: {
            validators: {
                notEmpty: {
                    message: 'The availability option is required'
                }
            }
        }
    }
});
$
expand_less