https://github.com/shystruk/form-validation
Form Validation
https://github.com/shystruk/form-validation
form-validation javascript jquery
Last synced: 9 months ago
JSON representation
Form Validation
- Host: GitHub
- URL: https://github.com/shystruk/form-validation
- Owner: shystruk
- Created: 2014-04-30T07:00:36.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-11-15T09:41:29.000Z (about 8 years ago)
- Last Synced: 2023-09-09T18:50:21.598Z (over 2 years ago)
- Topics: form-validation, javascript, jquery
- Language: JavaScript
- Homepage:
- Size: 247 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Form Validation
============================
Every form must be validate. In this form we check fields and alert users about errors before they submit the form.
In this form we check:
- name field has been filled out;
- email field must be like an email address;
- textarea field has been filled out.
###References
Create HTML page with form and add the id ***"form_*** *nameField"* for fields.
Look like this:
```html
Who is the best basketball player in the world ?
Please enter name
Please enter an email address
Please write a player
Submit
```
Next step we create file ***style.css*** were we write style and include it to **html** file in *head* section:
```html
```
Than we create file ***main.js*** and include to **html** file too:
```html
```
If we want to work with **jQuery** we must download or include jQuery library - [Donwload jQuery](http://jquery.com/download/) and include it to **html** file:
```html
```
Now we have complete **html** file. We give name ***index.html***.
###jQuery
In ***main.js*** file we write code for validation form:
First we write *function*:
```javascript
$(document).ready(function(){
// Handler for .ready() called.
});
```
It's specify function to execute when the DOM is fully loaded - [function ready](http://api.jquery.com/ready/)
Than we create variables for basic id's form:
```javascript
var playerForm = $('#player'),
button = $('#submit');
```
####Check name field:
```javascript
var name = $('#form_name'),
nameFalse = $('.name-false');
name.on('input', function() {
var input = $(this);
var nameValid = input.val();
if (nameValid) {
input.addClass('valid');
nameFalse.hide();
} else {
input.removeClass('valid');
nameFalse.show();
}
});
```
####Check email field:
```javascript
var email = $('#form_email'),
emailFalse = $('.email-false');
email.on('input', function() {
var input = $(this);
var symbols = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var emailValid = symbols.test(input.val());
if (emailValid) {
input.addClass('valid').removeClass('invalid');
emailFalse.hide();
} else {
input.addClass('invalid');
}
});
```
####Check textarea field:
```javascript
var field = $('#form_field'),
fieldFalse = $('.field-false');
field.keyup(function(event){
var input = $(this);
var fieldPlayer = input.val();
if (fieldPlayer) {
field.addClass('valid');
fieldFalse.hide();
} else {
field.removeClass('valid');
fieldFalse.show();
}
});
```
On the last step we check on the button ***submit*** all fields are valid:
```javascript
button.on('click', function(event){
var form = playerForm.serializeArray();
var error = true;
for (var input in form) {
var inputs = $('#form_' + form[input]['name']);
var inputsFalse = $('span', inputs.parent());
var valid = inputs.hasClass('valid');
if (!valid) {
inputsFalse.addClass('error');
error = false;
} else {
inputsFalse.hide();
}
}
if (!error) {
event.preventDefault();
} else {
alert('Form is validate');
}
});
```
Information
============
If you have some questions, problems or improvement for this form create issue and we will discuss.
Thank you!
License
========
[MIT License](http://opensource.org/licenses/mit-license.php)