auto-validation-form.js

A library used to verify registration/login form.

Contributors

So much appreciate for Mr.Sơn Đặng - Founder of "Cộng Đồng Học Lập Trình F8", Mr.Hữu Lộc

Installation and Usage

Server-side usage

Install the library with npm install auto-validation-form

npm install auto-validation-form

Client-side usage

Install

<script type="module" src="./app.js"></script>

Usage

In app.js

import { Validator } from './node_modules/auto-validation-form/validator.js';

var form =  new Validator('#idForm', '.classNameFormGroup', '.classNameErrorMessage'); 

Rules:

| Rules's name | Uses | | ---------------- |:-------------------------------------------------------------------:| | required | Is input required? | | email | Verify email is correct. | | min | Minimum characters for input. | | max | Maximum characters for input. | | confirmPassword | Verify input "Re-enter password". | | checked | Is type="radio" and type="checkbox" of input required? |

How to use rules?

You just need to add our predefined rules attribute, then add a value to that attribute depending on your needs.

Can I use more than one rule in input tag?

Absolutely yes! If you want to use one more rule, you just need to add the rule name directly to the value of the "rules" attribute in the input tag, then separate the values ​​with a "|".

Example:

index.html

<form action="" method="POST" class="form" id="register-form">
    <div class="title">Welcome</div>
    <div class="subtitle">Let's create your account!</div>

    <div class="form-group">
        <input id="fullname" name="fullname" class="input" rules="required" type="text" placeholder=" " />
        <label for="fullname" class="placeholder">Full name</label>
        <span class="form-message"></span>
    </div>

    <div class="form-group">
        <input id="email" name="email" class="input" rules="required|email" type="text" placeholder=" " />
        <label for="email" class="placeholder">Email</label>
        <span class="form-message"></span>
    </div>

    <button type="text" class="submit">Submit</button>
</form>

style.css

...
.form-group {
    height: 50px;
    position: relative;
    width: 100%;
    margin-top: 40px;
  }
  
  .form-message {
    font-size: 1rem;
    line-height: 1.2rem;
    padding: 4px 0 0;
    color: #f33a58;
  }

app.js

Validator('#register-form', '.form-group', '.form-message');
// Validator('#idForm', '.classNameFormGroup', '.classNameErrorMessage');