Go to homepage

Projects /

Form Validator

A plugin to validate form fields.

View Demo


All components are compatible with CodyFrame, Tailwind CSS or any other CSS framework.

How To

The form validator plugin is used to validate fields in a form.

Use the FormValidator object to initialize your form validation:

var form = document.getElementById('form-1');
var formValidate = new FormValidator({
  element: form,
  customValidate: {
    // custom validation functions here

Then use the validate method to validate your form (e.g., when the form is submitted):

form.addEventListener('submit', function(event){
    // errorFields: array of fields where an error was found

⚠️ Note: in the form-validator.js, we do not initialize the FormValidator object. You would need to initialize it (as shown in the above code snippets) for it to work properly.

Options #

The form validator plugin comes with a list of options you can use to customize the validation behavior.

inputErrorClass #

The class added to the input element if an error was found. Default value is 'form-control--error'.

var formValidate = new FormValidator({
  element: form,
  inputErrorClass: 'form-control--error'

inputWrapperErrorClass #

If the input element has an ancestor with a class of '.js-form-validate__input-wrapper', then the inputWrapperErrorClass is added to this ancestor if an error was found during the validation.
This can be used, for example, to reveal an error message. Default value is '.form-validate__input-wrapper--error'.

var formValidate = new FormValidator({
  element: form,
  inputWrapperErrorClass: 'form-validate__input-wrapper--error'

customValidate #

Use this option to pass a list of custom validation functions; for example, if you need to check if a field value includes a number, you can define the custom hasNumber function:

var formValidate = new FormValidator({
  element: form,
  customValidate: {
    hasNumber: function(input, cb) {
      // input -> field to check
      // cb -> callback function; return false if there was an error when validating the field
      cb(/\d/.test(input.value)); // return false if input.value does not include a number

To use this function on a field element, add a data-validate attribute equal to that function name:

<input type="password" name="password" id="password" required data-validate="hasNumber">

Aside from your custom functions, you can use the standard input attributes (like required or minlength).

<input type="email" name="email" id="email" required>

Note: when using the standard input attributes, HTML Form validation will be automatically performed. To deactivate it (and rely only on the Form Validator plugin) add the novalidate attribute to the form element.


Bug Report & Feedback

Component Github page ↗

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.