tessl/npm-foundation-sites

The most advanced responsive front-end framework in the world with CSS components, JavaScript plugins, and Sass utilities.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Form Validation

Name: tessl/npm-foundation-sites
Author: tessl

Foundation's Abide provides a robust form validation system with built-in patterns, custom validators, and accessibility support. It offers real-time validation, custom error messages, and extensive configuration options.

Capabilities

Abide Validation System

The core validation component that handles form validation with built-in patterns and custom validators.

/**
 * Form validation component with pattern matching and custom validators
 */
class Abide {
  constructor(element: JQuery, options?: IAbideOptions);
  
  /** Enable form validation */
  enableValidation(): void;
  
  /** Disable form validation */
  disableValidation(): void;
  
  /** Check if field is required and has value */
  requiredCheck(element: JQuery): boolean;
  
  /** Find error element for field */
  findFormError(element: JQuery, failedValidators?: string[]): JQuery;
  
  /** Find label for field */
  findLabel(element: JQuery): boolean;
  
  /** Find labels for radio button group */
  findRadioLabels(elements: JQuery): boolean;
  
  /** Find labels for checkbox group */
  findCheckboxLabels(elements: JQuery): boolean;
  
  /** Add error styling to field */
  addErrorClasses(element: JQuery, failedValidators?: string[]): void;
  
  /** Add accessibility attributes */
  addA11yAttributes(element: JQuery): void;
  
  /** Add global error accessibility attributes */
  addGlobalErrorA11yAttributes(element: JQuery): void;
  
  /** Remove error styling from radio group */
  removeRadioErrorClasses(groupName: string): void;
  
  /** Remove error styling from checkbox group */
  removeCheckboxErrorClasses(groupName: string): void;
  
  /** Remove error styling from field */
  removeErrorClasses(element: JQuery): void;
  
  /** Validate single input field */
  validateInput(element: JQuery): boolean;
  
  /** Validate entire form */
  validateForm(): boolean;
  
  /** Validate text input against pattern */
  validateText(element: JQuery, pattern: string): boolean;
  
  /** Validate radio button group */
  validateRadio(groupName: string): boolean;
  
  /** Validate checkbox group */
  validateCheckbox(groupName: string): boolean;
  
  /** Check if field matches validation requirements */
  matchValidation(element: JQuery, validators: string, required: boolean): boolean;
  
  /** Reset form validation state */
  resetForm(): void;
  
  /** Validation enabled state */
  initialized: boolean;
}

interface IAbideOptions {
  /** When to trigger validation ('fieldChange', 'formSubmit', null) */
  validateOn?: string | null;
  
  /** CSS class for error labels */
  labelErrorClass?: string;
  
  /** CSS class for error inputs */
  inputErrorClass?: string;
  
  /** Selector for form error containers */
  formErrorSelector?: string;
  
  /** CSS class for form errors */
  formErrorClass?: string;
  
  /** Add accessibility attributes */
  a11yAttributes?: boolean;
  
  /** ARIA error message level */
  a11yErrorLevel?: string;
  
  /** Enable live validation */
  liveValidate?: boolean;
  
  /** Validate on blur event */
  validateOnBlur?: boolean;
  
  /** Validation patterns */
  patterns?: IAbidePatterns;
  
  /** Custom validators */
  validators?: any;
}

Built-in Validation Patterns

Foundation includes common validation patterns for various input types.

/**
 * Built-in validation patterns for common input types
 */
interface IAbidePatterns {
  /** Alphabetic characters only */
  alpha?: RegExp;
  
  /** Alphanumeric characters only */
  alpha_numeric?: RegExp;
  
  /** Integer numbers only */
  integer?: RegExp;
  
  /** Numeric values (including decimals) */
  number?: RegExp;
  
  /** Credit card number format */
  card?: RegExp;
  
  /** Credit card CVV format */
  cvv?: RegExp;
  
  /** Email address format */
  email?: RegExp;
  
  /** URL format */
  url?: RegExp;
  
  /** Domain name format */
  domain?: RegExp;
  
  /** Date and time format */
  datetime?: RegExp;
  
  /** Date format */
  date?: RegExp;
  
  /** Time format */
  time?: RegExp;
  
  /** ISO date format */
  dateISO?: RegExp;
  
  /** Month/day/year format */
  month_day_year?: RegExp;
  
  /** Day/month/year format */
  day_month_year?: RegExp;
  
  /** Color hex format */
  color?: RegExp;
  
  /** Website URL format */
  website?: any;
}

Usage Examples:

<!-- Basic form validation -->
<form data-abide novalidate>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="cell small-12">
        <label>Email Required
          <input type="email" placeholder="test@example.com" required>
          <span class="form-error">
            Yo, you had better fill this out, it's required.
          </span>
        </label>
      </div>
      
      <div class="cell small-12">
        <label>Password Required
          <input type="password" id="password" placeholder="Password" required>
          <span class="form-error">
            I'm required!
          </span>
        </label>
      </div>
      
      <div class="cell small-12">
        <label>Re-enter Password
          <input type="password" placeholder="Re-enter Password" 
                 required pattern="alpha_numeric" 
                 data-equalto="password">
          <span class="form-error">
            Passwords must match!
          </span>
        </label>
      </div>
      
      <div class="cell small-12">
        <fieldset class="cell small-12">
          <legend>Choose Your Favorite</legend>
          <input type="radio" name="pokemon" value="Red" id="pokemonRed" required>
          <label for="pokemonRed">Red</label>
          
          <input type="radio" name="pokemon" value="Blue" id="pokemonBlue" required>
          <label for="pokemonBlue">Blue</label>
          
          <span class="form-error">
            You must choose at least one.
          </span>
        </fieldset>
      </div>
      
      <div class="cell small-12">
        <button class="button" type="submit" value="Submit">Submit</button>
      </div>
    </div>
  </div>
</form>

Custom Validators

You can extend Abide with custom validation functions.

// Add custom validator
Foundation.Abide.defaults.validators['myCustomValidator'] = function($el, required, parent) {
  // Custom validation logic
  return true; // or false
};

// Use in HTML
// <input type="text" data-validator="myCustomValidator" required>

Validation Events

Abide triggers events during the validation process.

// Listen for validation events
$('#my-form')
  .on('forminvalid.zf.abide', function(ev, frm) {
    console.log('Form id ' + frm.attr('id') + ' is invalid');
  })
  .on('formvalid.zf.abide', function(ev, frm) {
    console.log('Form id ' + frm.attr('id') + ' is valid');
  })
  .on('submit', function(ev) {
    ev.preventDefault();
    console.log('Submit intercepted');
  });

Validation CSS Classes

CSS classes applied during validation for styling purposes.

/**
 * Form validation state classes
 */
.is-invalid-input {
  border-color: #cc4b37;
  background-color: #f9eaea;
}

.is-invalid-label {
  color: #cc4b37;
}

.form-error {
  display: none;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #cc4b37;
}

.form-error.is-visible {
  display: block;
}

/**
 * Input group validation
 */
.input-group.is-invalid-input > .input-group-label {
  border-color: #cc4b37;
  background-color: #f9eaea;
  color: #cc4b37;
}

Accessibility Features

Abide includes comprehensive accessibility support with ARIA attributes.

/**
 * Accessibility configuration
 */
interface AbideA11yOptions {
  /** Enable accessibility attributes */
  a11yAttributes: boolean;
  
  /** ARIA error message level ('alert', 'status', 'polite') */
  a11yErrorLevel: string;
}

Generated ARIA attributes:

<!-- Abide automatically adds these attributes -->
<input type="email" 
       required 
       aria-required="true"
       aria-describedby="error-email"
       aria-invalid="false">
<span class="form-error" 
      id="error-email"
      role="alert"
      aria-live="assertive"
      aria-atomic="true">
  Error message
</span>

Advanced Configuration

// Initialize with custom options
$('#my-form').foundation('Abide', {
  validateOn: 'fieldChange',
  liveValidate: true,
  validateOnBlur: true,
  a11yAttributes: true,
  a11yErrorLevel: 'alert',
  patterns: {
    // Override or add patterns
    phone: /^[\d\+\-\.\(\)\s]+$/,
    custom_pattern: /^[a-zA-Z0-9]{3,}$/
  },
  validators: {
    // Custom validators
    myValidator: function($el, required, parent) {
      if (!required) return true;
      
      const value = $el.val();
      // Custom validation logic
      return value.length >= 3;
    }
  }
});

// Programmatic validation
const abide = new Foundation.Abide($('#my-form'));

// Validate specific field
const isValid = abide.validateInput($('#email-field'));

// Validate entire form
const formIsValid = abide.validateForm();

// Reset form validation
abide.resetForm();

Integration with Other Components

Abide works seamlessly with other Foundation components like Reveal modals and Accordion panels.

// Validate form in modal before closing
$('#my-modal').on('close.zf.reveal', function(e) {
  const form = $(this).find('form');
  const abide = form.data('zfPlugin');
  
  if (abide && !abide.validateForm()) {
    e.preventDefault();
    return false;
  }
});

// Validate accordion panel content
$('#my-accordion').on('down.zf.accordion', function(e, $target) {
  const form = $target.find('form');
  if (form.length) {
    form.foundation('Abide');
  }
});