Feature-rich Form Validation Library – OctaValidate

Preview:

Description:

Form validation is an important aspect of user experience in modern websites. Good validation helps to improve conversions, especially in a contact form. In many cases, when the user encounters a validation error page, they will lose interest and not complete the form — even if they are interested in your products and services.

OctaValidate is an open-source, feature-rich form validation JavaScript library that makes it easy to validate form input against built-in rules, regular expressions, and input attributes. It can help you validate the HTML forms in your application to increase user engagement by providing grouped errors, it can also help you make your forms manageable and consistent across many devices and browsers.

How to use it:

1. Download and load the OctaValidate library in the document.

<script src="src/validate.js"></script>

2. Apply built-in validation rules to form fields using the octavalidate attribute. The ov-* attributes are used to customize the error messages.

<form id="form_demo" novalidate>
  <h2 class="text-center mt-0 text-uppercase">DEMO Form</h2>
  <div class="notification is-info mt-20 mb-20">
      <p>This library will never process any data entered here.</p>
  </div>
  <div class="form-group">
      <label>Multiple Files Upload <span style="color:#ff0000">*</span></label>
      <input type="file" id="inp_multiple_files" octavalidate="R" minfiles="5" maxsize="10mb"
          accept-mime="audio/*" multiple>
      <small>5 Audio files only allowed, maximum size is 10MB.</small>
  </div>
  <div class="form-group">
      <label>Username <span style="color:#ff0000">*</span></label>
      <input type="text" id="inp_uname" octavalidate="R,USERNAME"
          ov-username:msg="Please enter a valid username" placeholder="Your username" length="5">
  </div>
  <div class="form-group">
      <label>Email <span style="color:#ff0000">*</span></label>
      <input type="text" id="inp_reg_email" octavalidate="R,EMAIL" placeholder="Your Email Address">
  </div>
  <div class="form-group">
      <label>Password <span style="color:#ff0000">*</span></label>
      <input type="password" id="inp_reg_pwd" octavalidate="R,PASS"
          ov-required:msg="A password is required" placeholder="Your Password">
  </div>
  <div class="form-group">
      <label>Re-enter password</label>
      <input type="password" id="inp_reg_pwd2" equalto="inp_reg_pwd"
          ov-equalto:msg="Both passwords do not match" placeholder="Re-enter Password">
  </div>
  <div class="mt-100">
      <input type="checkbox" id="inp_terms" octavalidate="R"
          ov-check:msg="You have to accept the terms and conditions">I accept the terms and conditions
  </div>
  <div class="form-group">
      <button class="reg-btn block" type="submit">RUN TEST</button>
  </div>
</form>

3. Initialize the OctaValidate.

const formVal = new octaValidate('example',{
      // options here
});

4. Create your own validation rules using Regex.

formVal.customRule(RULE_TITLE, REG_EXP, ERROR_TEXT);

5. Check if all fields are valid on submit.

document.querySelector('#example').addEventListener('submit', function(e){
  e.preventDefault();
  if(formVal.validate() === true)
  { 
    // ...
  } else {
    // ...
  }
})

6. Available options.

const formVal = new octaValidate('example',{
      // apply a green border to the field when valid
      successBorder: true,
      // enable strict mode
      strictMode: false,
      strictWords: ["null", "NaN", "undefined"],
});

7. Callback functions.

formVal.validateCallBack(successCB, errorCB);

8. More API methods.

// validate the form
formVal.validate();
// check form status
formVal.status();
// return the form ID
formVal.form();
// add more custom rules
formVal.moreCustomRules(RULES);
// return the library version
formVal.version();

Changelog:

v1.3.2 (02/04/2023)

• Optimized the code
• Length validations (Maxlength, Minlength & Length), now work only if the input element contains a value

v1.3.0 (11/30/2022)

• Bugfix

v1.2.9 (11/10/2022)

• Update

v1.2.7 (11/06/2022)

• Optimized the code according to issues with the react release of the library

v1.2.5 (11/06/2022)

• Bugfix & optimize

v1.2.3 (10/09/2022)

• Fixed a bug with strict mode.

v1.2.2 (10/03/2022)

• successBorder configuration option now has a default of true.
• If strictMode is enabled, the library returns the words provided by the user that are not allowed.
• showBackendErrors() method now removes error text when the input element has a value.

v1.2.0 (07/28/2022)

• Validation error/success display was improved
• File size conversions were modified
• New attribute “accept-mime” allows you to provide File MIME types and it supports MIME types with wildcards. Please refer to the documentation to learn more
• totalsize, totalminsize, and totalmaxsize were modified to be size, minsize, maxsize.
• New attributes “files, minfiles , and maxfiles” were added.