Beginner-Friendly JavaScript Form Validation Library – Trivule

Category: Form , Javascript , Recommended | May 27, 2024
Author:trivule
Views Total:36 views
Official Page:Go to website
Last Update:May 27, 2024
License:MIT

Preview:

Beginner-Friendly JavaScript Form Validation Library – Trivule

Description:

Trivule is a JavaScript library designed to simplify form validation. It’s perfect for both beginners and experienced developers.

You can quickly add validation rules to form fields using simple HTML attributes. There is no need to write complex JavaScript code from scratch; Trivule takes care of it for you.

Trivule provides real-time feedback as users fill out the form fields. You can validate entire forms or specific inputs, and customize feedback messages to suit your needs. Trivule also supports multiple languages and allows you to disable the submit button until all fields are valid.

How to use it:

1. Download and include the JavaScript library directly in your HTML:

<script src="index.umd.js"></script>

2. Or, you can install it via NPM and import the necessary components into your JavaScript project:

npm i trivule
import { 
  TrInput, // validate a single input
  TrForm, // validate a specific form
  Trivule, // validate all forms
} from 'trivule';

3. define your validation rules directly within your HTML. The data-tr-rules attribute allows you to specify rules like ‘required’, ‘between’, or ‘only:string’. You can also set custom feedback messages using the data-tr-feedback attribute.

<div>
  <input
    data-tr-rules="required|between:2,80|only:string"
    type="text"
    name="name"
    required
  />
</div>
<div data-tr-feedback="name"></div>
<button type="submit" value="Submit" data-tr-submit>
  Submit Form
</button>
const myValidator = new Trivule();
myValidator.init();

4. All available validation rules:

<!-- Global Rules -->
<!-- Checks if the input is required. -->
<input data-tr-rules="required" />
<!-- Checks if the input is in the specified list. -->
<input data-tr-rules="in:active,inactive" />
<!-- Checks if the input is at most the specified size. -->
<!-- If the input value is not a file, then the number of characters must be exactly maxSize -->
<input data-tr-rules="size:6" />
<!-- Checks if the input is a boolean value. -->
<input data-tr-rules="boolean" />
<!-- Checks if the input is between the specified minimum and maximum values. -->
<!-- This rule between validates data according to its type. It can be used to validate numbers, strings, dates, file size, etc. -->
<!--valide number-->
<input type="number" data-tr-rules="between:6,7" />
<!--valide string-->
<input type="text" data-tr-rules="between:6,7" />
<!--valide date-->
<input type="date-local" data-tr-rules="between:01-01-2021,now" />
<!--valide file size-->
<input type="file" data-tr-rules="between:2MB,3MB" />
<!-- Checks if the input matches the specified regular expression. -->
<input data-tr-rules="regex:^[A-Z]+$"/>
<!-- Only accepts inputs of a specific type. -->
<input data-tr-rules="only:digit"/>
<!-- Checks if the input is a digit (numeric value) with the specified number of digits. -->
<input data-tr-rules="digit:8"/>
<!-- Checks if the input is a digit (numeric value) with a number of digits less than or equal to the specified maximum. -->
<input data-tr-rules="max_digit:10"/>
<!-- Checks if the input is a digit (numeric value) with a number of digits greater than or equal to the specified minimum. -->
<input data-tr-rules="min_digit:5"/>
<!-- Date Rules -->
<!-- Checks if the input is a valid date. -->
<input type="date-local" data-tr-rules="date" />
<!-- Checks whether a given date is before another date. -->
<input type="date-local" data-tr-rules="before:2020-11-11" />
<!-- Checks whether a given date is after another date. -->
<input data-tr-rules="after:now" />
<!-- Checks whether a given date is between two other dates. -->
<input type="date-local" data-tr-rules="dateBetween:2020-11-11,now" />
<!-- Checks whether a given string represents a valid time in 24-hour format. -->
<input data-tr-rules="time" />
<!-- File Rules -->
<!-- Checks whether a given value is a `File` or `Blob` object. -->
<input data-tr-rules="file" />
<!-- Checks whether the size of a given `File` or `Blob` object is less than or equal to a given maximum size. -->
<input data-tr-rules="maxFileSize:1MB" />
<!-- Checks if the size of a file is greater than or equal to the specified minimum size. -->
<input data-tr-rules="minFileSize:1MB" />
<!-- Checks whether the size of a given `File` or `Blob` object is between the specified minimum and maximum size. -->
<input data-tr-rules="fileBetween:1MB,5MB" />
<!-- Checks whether the MIME type of a given `File` or `Blob` object matches the specified MIME type. -->
<input type="file" data-tr-rules="mimies:.pdf" />
<!-- Number Rules -->
<!-- When the value is a number, it checks whether the input value is greater than or equal to min -->
<!-- When the value is a character string, it checks whether the number of characters is greater than or equal to min -->
<input tr-rules="min:2"/>
<!-- When the value is a number, it checks whether the input value is less than or equal to max -->
<!-- When the value is a character string, it checks whether the number of characters is less than or equal to max -->
<input tr-rules="max:20"/>
<!-- Checks if the input is an integer. It has alias (int) -->
<input tr-rules="integer"/>
<!-- Checks if the input is a number. -->
<input tr-rules="number"/>
<!-- Checks whether a number is a multiple or divisible by another number. Has alias (mod) -->
<input tr-rules="mod:2"/>
<!-- Checks whether the input is less than the specified value. -->
<input tr-rules="lessThan:10"/>
<!-- Checks whether the input is greater than the specified value. -->
<input tr-rules="greaterThan:5"/>
<!-- Checks if the input number is between the specified minimum and maximum values. -->
<input data-tr-rules="numberBetween:1,10"/>
<!-- Phone Rules -->
<!-- This callback validates the format of the phone number. -->
<!-- Note that this may contain errors given the diversity of existing telephone numbers. -->
<input data-tr-rules="phone:US,FR,BJ" />
<input data-tr-rules="phone" />
<!-- String Rules -->
<!-- Validates an email address. -->
<input data-tr-rules="email"/>
<!-- Validates that the input is at least a certain length. -->
<input data-tr-rules="minlength:8"/>
<!-- Validates that the input is no more than a certain length. -->
<input data-tr-rules="maxlength:8"/>
<!-- Validates a URL. -->
<input data-tr-rules="url"/>
<!-- Checks if the input starts with an uppercase letter. -->
<input data-tr-rules="startWithUpper"/>
<!-- Checks if the input starts with a lowercase letter. -->
<input data-tr-rules="startWithLower"/>
<!-- Checks whether a given string starts with any of the given prefixes. -->
<input data-tr-rules="startWith"/>
<!-- Checks whether a given string ends with one of the specified suffixes. -->
<input data-tr-rules="endWith"/>
<!-- Checks if the input contains all the specified substrings. -->
<input data-tr-rules="contains:thanks,yes"/>
<!-- Checks if the input has the specified length. Has alias (len) -->
<input data-tr-rules="length:9"/>
<!-- Checks if the input is a valid password. -->
<input data-tr-rules="password"/>
<!-- Checks if the input starts with a letter. -->
<input data-tr-rules="startWithString"/>
<!-- Checks if the input ends with a letter. -->
<input data-tr-rules="endWithString"/>
<!-- Checks if the input contains a letter. -->
<input data-tr-rules="containsLetter"/>
<!-- Checks if the input does not contain any of the specified characters. -->
<input data-tr-rules="excludes:-,@,&esp;"/>
<!-- Checks if the input is all uppercase. -->
<input data-tr-rules="upper"/>
<!-- Checks if the input is all lowercase. -->
<input data-tr-rules="lower"/>
<!-- Checks whether the length of a given string is between the specified minimum and maximum values. -->
<input data-tr-rules="stringBetween:2,5" />

5. Customize the feedback messages with the rewrite(lang, rule, message) function:

TrLocal.rewrite('en', 'min', 'Your custom message for the min rule');
// OR
TrLocal.rewriteMany('en', ['min', 'max'], ['Min rule message', 'Max rule message']);

6. You can also customize the feedback messages using the data-tr-messages attribute.

<input
  name="email" type="text"
  data-tr-rules="required|email|maxlength:60"
  data-tr-messages="The field is required|The email is invalid|The email is too long"
/>

7. More HTML data attributes:

  • data-tr-invalid-class: Invalid CSS class for input
  • data-tr-valid-class: Valid CSS class for input
  • data-tr-auto: Auto-valide input while typing
  • data-tr-feedback: Specify a feedback element associated with a form field
  • data-tr-submit: Specify the submit button
  • data-tr-enabled-class: Enabled CSS class for submit button
  • data-tr-disabled-class: Disabled CSS class for submit button
  • data-tr-name: Change the input’s name in the feedback message
  • data-tr-lang: Specify the language

8. Add more languages:

TrLocal.translate('es', {
  min: "El campo :field debe ser menor que :arg0",
  rule1: "Mensaje 1",
  etc: "etc."
});

9. Available events:

<input data-tr-events="mouseenter|blur|my-custom-event" />
  • tr.input.passes
  • tr.input.fails
  • tr.form.init
  • tr.form.passes
  • tr.form.fails
  • tr.form.update

Changelog:

v1.2.0 (05/26/2024)

  • Advanced Rule Management: Added a $rules property to the TrivuleInput instance, allowing for advanced operations such as adding, removing, or modifying validation rules on-the-fly. This provides greater flexibility in managing form validation dynamically.
  • Dynamic Rule Definition: Introduced support for dynamic rules via callback functions in the InputRule, enabling more complex and context-aware validation logic.
  • Conditional Validation Improvements: Enhanced conditional validation mechanisms, making it easier to implement and manage complex validation scenarios based on various conditions.
  • Performance Optimization: Continued improvements to the performance of the validation system, ensuring faster validation checks and reduced overhead.
  • Dynamic Rule Callbacks: Implemented dynamic rule callbacks that allow validation logic to be defined and executed based on runtime conditions, providing more powerful and flexible validation capabilities.

v1.1.0 (05/03/2024)

  • Performance Improvement: Enhanced the overall performance of the validation system.
  • Optional Initialization: Made the init method optional for both TrivuleInput and TrivuleForm.
  • Real-Time Validation: Added the realTime key to the configuration, allowing developers to enable or disable real-time validation.
  • Imperative Validation: Introduced imperative validation for more dynamic interaction with forms, including the ability to add, remove, and modify validation rules during program execution.
  • Global Feedback Elements: Added the capability to define global feedback elements on the form for its fields.
  • Enhanced Event Handling: Updated methods onFails, onPasses, and onUpdate for TrivuleInput and TrivuleForm to improve event handling and customization.

You Might Be Interested In:


Leave a Reply