Full-featured Regex Based Form Validator - jQuery deRegexValidation

deRegexValidation is an easy yet fully customizable jQuery validator which uses regular expressions to validate form controls with user-friendly feedbacks.

More features:

• Prevents submit until all the fields are valid.
• Disables any buttons until all the fields are valid.
• Validates form controls on blur, input, change, submit, and custom events.
• Easy to create your own validation rules using regular expressions.
• Custom and easy-to-style error messages.
• Highlights invalid form controls when errors found.
• 20 built-in validators.
• Auto scrolls the page to the first invalid field.

How to use it:

1. Wrap your form controls into DIV containers with the CSS class of 'form-row' and then specify validators using the data-validation-cfg attribute. You can apply multiple validators to the same form control using the following built-in rules separated by a comma.

• letters: Only letters
• letters_special: Only letters, spaces / -
• letters_special_2: Only words, spaces / - , .
• digits_only: Digits only
• digits9: Exactly 9 digits
• Exactly 10 digits: Exactly 10 digits
• digits_and_separators_only: Digits and separators only
• number: Valid number
• letters_digits_only: Only letters, digits, space / -
• letters_digits_special: Only letters, digits, space / -
• letters_digits_special_2: Only letters, digits, space / - , .
• email: Valid email
• required: Required field
• password_6: Password requires at least 6 symbols
• phone: Valid phone in the international format
• hex_value: Valid hex value
• rgb_color_value: Valid rgb color
• rgba_color_value: Valid rgba color
• hsl_color_value: Valid hsl color
• hsla_color_value: Valid hsla color

<form class="form-example" novalidate>
  <div class="form-row">
    <label>First name: <input type="text" name="words" data-validation-cfg="letters_special" required>
    </label>
  </div>
  <div class="form-row">
    <label>Digits:<input type="text" name="only-digits" data-validation-cfg="digits_only" required value="">
    </label>
  </div>
  <div class="form-row">
    <label>Digits with separtors:<input type="text" name="only-digits" data-validation-cfg="digits_and_separators_only,required" value="">
    </label>
  </div>
  <div class="form-row-submit form-row">
    <button type="submit" class="btn">Submit</button>
  </div>
</form>

2. Initialize the plugin on the HTML form and done.

$('.form-example').deRegexValidation({
  // options here
});

3. Create a new form validator using regular expressions.

{
  name: 'my_rule',
  regex: regular expressions here,
  notice: 'custom error message'
}

<div class="form-row">
  <label>Custom Rule: <input type="text" name="words" data-validation-cfg="my_rule" required>
  </label>
</div>

4. Apply custom styles to invalid fields & error messages.

.input-invalid input, .input-invalid textarea, .input-invalid select {
  /* your styles here */
}

[class*=validation-notice] {
  /* your styles here */
}

5. All plugin options to customize the form validator.

$('.form-example').deRegexValidation({

  // name space
  eventNamespace: 'deRegexValidation',

  // trigger events
  events: ['input', 'change', 'blur'],

  // data attribute to hold the validators
  dataAttrs: {
    validationCfgs: 'validation-cfg'
  },

  // default CSS classes
  cssClasses: {
    formValid: 'form-valid',
    formInvalid: 'form-invalid',
    inputValid: 'input-valid',
    inputInvalid: 'input-invalid',
    noticeIndex: 'validation-notice-'
  },

  // selector to hold the form controls
  selectors: {
    inputParent: '.form-row'
  },

  // tag name for error message
  noticeTagName: 'p',

  // prevents submit on invalid
  preventSubmitOnInvalid: false,

  // disable form buttons on invalid
  disableFormOnInvalid: false,

  // whether or not to validate required fields
  validateRequiredFields: false,

  // you can also insert validators here
  userValidationCfgs: []
  
});

6. API methods.

// validate the form manually
$('.form-example').deRegexValidation('validateForm', true);

// destroy the plugin
$('.form-example').deRegexValidation('destroy');

7. Event handlers.

$('.form-example').deRegexValidation({
  on: {
    init: function(form){
      // on init
    },
    beforeFieldValidation: function(form, input){
      // before validate
    },
    afterFieldValidation: function(form, input){
      // after validate
    },
    validFormSubmit: function(form){
      // on submit
    },
    invalidFormSubmit: function(form){
      // on submit
    },
    beforeDestroy: function(form){
      // before destroy
    },
  }
});

---

This awesome jQuery plugin is developed by alex-2077. For more Advanced Usages, please check the demo page or visit the official website.