Please write a player
```
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)
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.
