$('#productForm').formValidation({
    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'
                }
            }
        }
    }
});

  $('#contact-form')
  //This initializes the required icon to show on page load
  .on('init.field.fv', function(e, data) {
    // data.fv      --> The FormValidation instance
    // data.field   --> The field name
    // data.element --> The field element
    
    var $icon      = data.element.data('fv.icon'),
        options    = data.fv.getOptions(),                      // Entire options
        validators = data.fv.getOptions(data.field).validators; // The field validators
        
    if (validators.notEmpty && options.icon && options.icon.required) {
      // The field uses notEmpty validator
      // Add required icon
      $icon.addClass(options.icon.required).show();
    }
  })
  .formValidation({
    fields: {
      userName:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      state:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      radioList:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      gender:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      userEmail:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
       address:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      zip:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      phone:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      },
      city:{
        validators:{
          notEmpty: {
            message: 'The name is required'
          }
        }
      }
    }
  })
 //This hides the success icon. By default the success icon is activated after an error is fixed.
  .on('success.field.fv', function(e, data) {
      // If the field is empty
      //if (data.element.val() === '') {
          var $parent = data.element.parents('.form-group');
          
          // Remove the has-success class
          $parent.removeClass('has-success');
          
          // Hide the success icon
          $parent.find('.form-control-feedback[data-fv-icon-for="' + data.field + '"]').hide();
      //}
  })
  // Remove the required icon when the field updates its status
  .on('status.field.fv', function(e, data) {
        var $icon      = data.element.data('fv.icon'),
            options    = data.fv.getOptions(),                      // Entire options
            validators = data.fv.getOptions(data.field).validators; // The field validators
            
        if (validators.notEmpty && options.icon && options.icon.required) {
            $icon.removeClass(options.icon.required).addClass('fa');
        }
  })