Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gocanto/easiest-js-validator
The easiest way to validate your forms without 3rd party packages
https://github.com/gocanto/easiest-js-validator
javascript validator
Last synced: 2 months ago
JSON representation
The easiest way to validate your forms without 3rd party packages
- Host: GitHub
- URL: https://github.com/gocanto/easiest-js-validator
- Owner: gocanto
- License: mit
- Created: 2016-07-01T16:53:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-10T02:29:13.000Z (almost 2 years ago)
- Last Synced: 2024-10-18T20:46:52.457Z (3 months ago)
- Topics: javascript, validator
- Language: JavaScript
- Homepage: https://gocanto.github.io/easiest-js-validator
- Size: 493 KB
- Stars: 54
- Watchers: 5
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Easiest JS Validator
It is a simple library ready to pull in into your project. Its goal is to provide an easy way to validate HTML forms without the headache of adapting any other complicated packages. Also, it was written in es2015, so you can get your feet wet with this amazing new way of working with JS.
# Installation
To install this package you just need to open your console line and type ```npm i easiest-js-validator```. If there is a problem during the installation, you can try again using the ```force param``` as so ```npm i -f easiest-js-validator```
# Gettings started
First of all, you will have to import the library into the file where you are operating. As so,
```js
import Validator from 'easiest-js-validator';
```
Take a look at the example published.
# illustration
Also, you will be able to see the online DEMO
# Validation rules array
This array contains all the information about the form fields that you want to be validated where its keys are the same as your form object, As so:
```html
```
```js
//rules object
rules: {
first_name: 'required,alpha',
last_name: 'required,alpha',
email: 'required,email',
address: 'required',
}
```
Implementation
```js
//form object
profile: {
first_name,
last_name,
email,
address,
}
```
Implementation
# Invoke the validator class
At this point, we just have to call the static method ```make``` into the validator class and pass the info which it will operate. As so,
```js
let validate = Validator.make(profile, rules, messages);
```
Where messages will be the responsible of bringing the language into the class, in order for it to offer a better output, such as field is required, email is not valid, etc. It is important to know that messages have to meet the same structure as profile object.
```js
//messages object example
messages: {
first_name: 'required',
email: 'must have a valid format'
}
```
Implementation
# If there were errors
If there were errors, you will have an associative array using how reference the exactly field that does not meet the rules. as so,
```js
errors = [
first_name: "The field is required.",
last_name: "The field is required.",
email: "The email field must be a valid email address.",
address: "The field is required."
]
```
Implementation
Now, you have access to the validation messages and can proceed as you want.
# How can I see if my field has errors?
This is easy enough. You only have to check the returned array and show the result on the form in the best way for you. As so,
```js
hasError: function (key)
{
return typeof errors[key] !== 'undefined';
}
if (hasError('first_name')) {
console.log(errors['first_name'])
}
```
You can see the demo on DEMO
# Features
You will be able to validate you forms againts any of this rules:
* url
* integer
* numeric
* alphaNum
* email
* alpha
* required
* digits
* length
* blank
* dateISO
* phoneNumber
# Summary
In spite of the demo was written in vuejs, you will be able to pull in the ```validator class under any other js framework```
If you have any question, shoot me an email. I will be glad of helping you out.
# Contributing
Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.
# License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
# How can I thank you?
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter? Spread the word!
Don't forget to [follow me on twitter](https://twitter.com/gocanto)!
Thanks!
Gustavo Ocanto.
[email protected]