Author: | Octagon-simon |
---|---|
Views Total: | 175 views |
Official Page: | Go to website |
Last Update: | February 4, 2023 |
License: | MIT |
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.
Validation Rule | Description | Validation Text Attribute |
---|---|---|
R | Required | ov-required:msg |
ov-email:msg | ||
ALPHA_ONLY | Alphabets Only | ov-alpha-only:msg |
ALPHA_SPACES | Alphabets and Spaces | ov-alpha-spaces:msg |
ALPHA_NUMERIC | Alphabets with Numbers | ov-alpha-numeric:msg |
LOWER ALPHA | Lowercase letters | ov-lower-alpha:msg |
UPPER_ALPHA | Uppercase letters | ov-upper-alpha:msg |
PWD | Password | ov-pwd:msg |
DIGITS | Digits | ov-digits:msg |
URL | URL | ov-url:msg |
URL_QP | URL with Query Parameters | ov-url-qp:msg |
DATE_MDY | Date in the format MM/DD/YYYY | ov-date-mdy:msg |
USERNAME | Username | ov-username:msg |
TEXT | General Text | ov-text:msg |
<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.