Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manufosela/automatic-form-validation
Automatic javascript validator to HTML fields forms using data- HTML5 attributes.
https://github.com/manufosela/automatic-form-validation
Last synced: 4 days ago
JSON representation
Automatic javascript validator to HTML fields forms using data- HTML5 attributes.
- Host: GitHub
- URL: https://github.com/manufosela/automatic-form-validation
- Owner: manufosela
- License: other
- Created: 2015-03-24T13:22:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T22:19:37.000Z (almost 2 years ago)
- Last Synced: 2024-11-08T19:04:52.853Z (6 days ago)
- Language: JavaScript
- Size: 242 KB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ValidateForm.js
ValidateForm.js is an automatic javascript class to validate HTML form fields using **data-** HTML5 attributes.
It has little more than 12Kb. Without dependencies, like jQuery, but compatible with them.
## Example:
- http://codepen.io/manufosela/pen/PqZdrq (Live Codepen)
- https://manufosela.es/Automatic-Form-Validation/index.html
## Simple Use
- First add in yout HTML
```html
```
or
```html
import { ValidateForm } from "./ValidateForm.min.js";
```
- Second, create object validateForm:
```html
window.onload = function () {
const validateForm = new ValidateForm();
};
```
Or you can use your own submit Callback:
```html
function mySubmitCallback() {
// do something before submit and/or return false to prevent submit
}
window.onload = function () {
const validateForm = new ValidateForm(mySubmitCallback);
};
```
Or you can use config options:
````html
function mySubmitCallback() {
// do something before submit and/or return false to prevent submit
}
const confOpt = {};
confOpt.warningColor = "#FF0";
confOpt.asteriskStyle = "color: #F00; font-size: 15px; padding-left:3px;";
confOpt.cssTextWarning = "color:#0F0; margin:10px;";
confOpt.cssElementWarning = "border:1px solid #FF0;";
confOpt.requiredTextContent = "O"; // instead of '*'
confOpt.scope = myComponent.shadowRoot; // To use into a shadow DOM of a web-component, for example
window.onload = function () {
const validateForm = new ValidateForm(mySubmitCallback, confOpt);
};
- Third add data-validate="true", and optionaly data-checkrealtime="true", to
tag: ```html
````
- Four add _data-_ attributes to form fields:
- data-required="true" to mandatory fields
- data-tovalidate="XXXX" to check the value with XXXX type
Example:
```html
```
ValidateForm.js automatically adds a red asterisk at the end on the tag
## data-tovalidate types
ValidateForm.js can validate the next fields type:
- **int** or integer: integer numbers
- **float**: float numbers, numbers and .
- **number** or **numero**: numbers
- **alpha** or **alfa** or **text** or **texto**: text values, not numbers.
- **text-**: text values and -
- **alphaNumericSpace** or **textspace**: alphanumeric values with spaces, text and numbers with spaces
- **alphaNumeric** or **textnum**: alphanumeric values, text and numbers
- **email** or **correo**: email address
- **url**: url address
- **iccid**: integrated circuit card identifier
- **nummovil** or **movil** or **mobile**: Telephone number (mobile phone, not international phone)
- **numfijo** or **fijo** or **landphone**: Telephone number (land phone)
- **telefono** or **tel** or **telephone**: Telephone number (mobile or land phone)
- **cp** or **postalcode**: postal code
- **cuentabancaria** or **accountnumber**: account number
- **tarjetacredito** or **creditcard**: credit card
- **nif**: Número de Identificacion Fiscal in Spain
- **cif**: Código de Identificación Fiscal in Spain
- **nie**: Número de Identidad de Extranjero in Spain
- **fecha** or **date**: Date
- **noempty**: any value
You can use customize functions using _fn:myFunction_. You must define myFunction into a script tag previously.
## Attribute data-type
Use _data-type="checkbox-group"_ into a tag to validate a group of checkboxes.
Use with _data-min="2"_ and _data-max="3"_ to validate a group of checkboxes with max and min.
Use _data-error-msg="XXXX"_ to define a custom error message.
#### Example:
```html
```
## Atributte data-name
Use _data-name="XXXX"_ into a tag to show and hide a group of radio buttons.
Use two radio-buttons with id with the same label name adding YES and NO to the end of the label name and with attribute _data-type="hiddenON"_ every radio-button.
#### Example:
```html
Do you have a phone number?
No
Yes
Phone number
Let me call by phone
```
## Complete Example:
```html
Your name
mobile number
Email
Accept conditions
Type an odd value:
Submit
function checkOdd(value) {
return value % 2 == 0;
}
import { ValidateForm } from "./ValidateForm.min.js";
window.onload = function () {
const validateForm = new ValidateForm();
};
```
## Complex uses
### data-name attribute
Add a _data-name_ attribute to form fields extra label near of radio or checkbox fields, to show error message when these fields are wrong.
_data-name_ atribute has the value of the name of a radio o checkbox field marked to be checked.
When the named field has a wrong value it is marked instead of the radio or checkbox field.
```html
Do you have a phone number?
No
Yes
```
### data-activate / data-deactivate and data-type=hiddenON
Add a _data-activate_ and _data-deactivate_ attributes to form fields to show fields when a value is select in referered data- value.
The fields with _data-activate/data-deactivate_ must be a data-type hiddenON and must have the attribute _type_, indicating the type of field to show when not hidden.
```html
Do you have a phone number?
No
Yes
Phone number
```
### data-checkrealtime
By default the value is true.
When a field lost the focus, this one is checked and a warning message is showed, if the value is not valid, in function to the value of data-tovalidate and data-required.
If you add the attribute _data-checkrealtime_ equal to false it avoids check the form when a field lost the focus.
The form is checked before the submit action, in that case, if any field is wrong this one will be checked when it lose the focus.
All fields/group fields need a label tag with correct for attribute to work correctly.
If the object from Validateform is created before to render de form, you can call `validateForm.checkFieldsToValidate();` to add validate functionality after
To use into a web-component you must define the _scope_ like webComponentName.shadowRoot.