A library of data validation tools.
The Validation All library makes data validation in JavaScript very easy.
- Ease of handling and use.
- You can validate data without writing a single line of JavaScript.
- Using Bootstrap to display the error message.
- ES6 support and ES5 support.
- Control the display of messages through the message-view file
npm i validation-all
const validation = require("validation-all").validation;
<script src="script/validation.min.js"></script>
You can do the validation with JavaScript or HTML
validation(input).email(); //=> true or false
input {Element} the input you want to validate and you can also replace it with data directly for example validation('test@gmail.com').email()
email verification type
validation(input, {
required: true,
view: true,
errorMessage: "error",
correctMessage: "correct",
}).email(); //=> true or false
- required - Determine whether input is required or not
- The default value is
input.required
- The default value is
- view - Influence of input when true or false
- The default value will be
true
if the input has classform-control
, If this class does not exist, the default value will befalse
- The default value will be
- errorMessage - The message appears when the result is false
- The default value is the error message placed in the
message-view
file of "email" or the validation type specified
- The default value is the error message placed in the
- correctMessage - The message appears when the result is true
- The default value is the correct message placed in the
message-view
file of "email" or the validation type specified
- The default value is the correct message placed in the
Notice: To use HTML only to validate the input you must be a Bootstrap library caller
<form class="vaal-form">
<input type="text" class="form-control vaal-email" />
</form>
vaal-form {class} This class defines that you are using validation-all in this form
vaal-email {class} Specify the type of verification in this input
<input
type="text"
class="form-control vaal-email"
vaal-msg-error="Email is not valid"
vaal-msg-correct="is email"
required
/>
- vaal-msg-error - This message will be displayed when the value is wrong
- vaal-msg-correct - This message will be displayed when the value is true
- required - To make input required
Explanation of all verification orders
Verify the email is correct
validation(input).email(); //=> true or false
<input type="text" class="form-control vaal-email" />
To check how hard the password is there are 3 levels of difficulty
validation(input).password(); //=> true or false
validation(input).password({
level: "complex",
resetPassword: reset,
}); //=> true or false
- complex - Required password difficulty level
- There are 3 levels
(simple, complex, difficult)
- There are 3 levels
- reset {Element} - Input field Return password
<input type="password" class="form-control vaal-password" />
<input
type="password"
class="form-control vaal-password"
vaal-level="complex"
/>
<input type="password" class="form-control vaal-reset-password" />
- vaal-level - Required password difficulty level
- There are 3 levels
(simple, complex, difficult)
- There are 3 levels
- vaal-reset-password {class} - Input field Return password
Verify that the file exists and check the format of the file
validation(input).file(); //=> true or false
validation(input).file(["png", "jpg"]); //=> true or false
- [formulas] {Array} Array in the required formats
<input type="file" class="form-control vaal-file" />
<input type="file" class="form-control vaal-file" vaal-formats="png,jpg" />
- [vaal-formats] Required formats
Verify phone numbers
validation(input).phone("+20", 10); //=> true or false
- ['+20'] Phone number key or you can type the numbers you want the phone number to start with
- You can also add more than one number to the beginning of the phone number
Example: ['010', '011', '012']
- You can also add more than one number to the beginning of the phone number
- 10 {number} The number of digits you want after the phone number key
<input type="text" class="form-control vaal-phone" vaal-start="+20" vaal-length="10">
- vaal-start The phone number key is added or you can type the numbers you want the phone number to start with
- You can also add more than one number to the beginning of the phone number
Example: vaal-start="010,011,012"
- You can also add more than one number to the beginning of the phone number
- vaal-length Specify the number of digits you want after the phone number key
Check URL
validation(input).url(); //=> true or false
<input type="text" class="form-control vaal-url">
To check the number
validation(input).number(); //=> true or false
validation(input).number(min, max);
- min {number} Specify min length
- max {number} Specify max length
<input type="text" class="form-control vaal-number" />
<input
type="text"
class="form-control vaal-number"
vaal-min="4"
vaal-max="10"
/>
- vaal-min {number} Specify min length
- vaal-max {number} Specify max length
Check that the integer
validation(input).integer(); //=> true or false
validation(input).integer(min, max);
- min {number} Specify min length
- max {number} Specify max length
<input type="text" class="form-control vaal-integer" />
<input
type="text"
class="form-control vaal-integer"
vaal-min="4"
vaal-max="10"
/>
- vaal-min {number} Specify min length
- vaal-max {number} Specify max length
To make sure that he pressed the checkbox
validation(input).checkbox(); //=> true or false
<input type="checkbox" class="form-check-input vaal-checkbox" />
To make sure he pressed the radio
validation(input).radio(); //=> true or false
<input type="radio" class="form-check-input vaal-radio" />
Make the required input
validation(input).required(); //=> true or false
<input type="text" class="form-control" required />
Used to specify the type of verification, the maximum length and the minimum length
validation(input).rules({
type: "url",
min: 10,
max: 55,
}); //=> true or false
- type Select the type of verification
- You can specify string or number or integer or email or url
- min {number} Specify min length
- max {number} Specify max length
<input
type="text"
class="form-control vaal-rules"
vaal-type="url"
vaal-min="10"
vaal-max="55"
/>
- vaal-type Select the type of verification
- You can specify string or number or integer or email or url
- vaal-min {number} Specify min length
- vaal-max {number} Specify max length
- This file contains all messages used for validation
- These messages are used when messages are not specified
You must first call messageView
import { validation, messageView } from "validation-all";
You will create an object containing the messages you want to use
var validationMsg = {
checkbox: { error: "", correct: "" },
radio: { error: "", correct: "" },
email: { error: "sorry, this email is incorrect", correct: "" },
required: { error: "this field is required", correct: "" },
number: { error: "the figure is incorrect", correct: "" },
integer: { error: "the figure is incorrect", correct: "" },
file: { error: "this file format is incorrect", correct: "" },
url: { error: "sorry, but this link is incorrect", correct: "" },
phone: { error: "sorry, but this phone number is incorrect", correct: "" },
resetPassword: {
error: "sorry, but the password does not match",
correct: "",
},
password: {
simple: {
error: "sorry, but the password must be at least 8",
correct: "",
},
complex: {
error:
"sorry, but the password must be at least 8 and contain letters and numbers",
correct: "",
},
difficult: {
error:
"sorry, but the password must be at least 8 and contain uppercase and lowercase letters, numbers and symbols",
correct: "",
},
},
};
for (const key in validationMsg) {
messageView[key] = validationMsg[key];
}
These are the default message names. You can add a new message name and use it
userName: { error: 'This username is already in use', correct: '' }
- userName {message name} It will be used to invoke the message from the object
validation(input).correct("userName"); // => '';
validation(input).error("userName"); // => 'This username is already in use';
- userName I type the name of the message you want to use
- error - correct If you use the error function, the error message will be displayed, and If you use the correct function, the correct message will be displayed
- input the input in which the message will be displayed
Copyright (c) 2023 Yousef Hatem <yousef26hatem@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.