Javascript - How to validate form fields

Question

I’m creating a form that I need to validate: E-mail, CPF, Birth Date, Contact Phone, Optional Phone.

Someone knows how to do this with that "mask", that when the person type the date for example, does not need to enter the "/" bars, javascript does this. Just like in the other camps I mentioned?

Another thing, in the other fields like Name, Address, etc..., if the data are not entered, issue an alert asking to be entered.

Example:

Remark: Pure Javascript.....

Answer 1

You can use the jQuery Mask to perform input formatting: The code will look like this:

 $('.cpf').mask('000.000.000-00', {reverse: true});
 $('.date').mask('00/00/0000');
 $('.phone_with_ddd').mask('(00) 0000-00000');

And for validation you can use HTML5 validation or use a plugin for this, such as Parsley.

When you have more formed questions and not so generic, open a new specific question.

Answer 2

You can use an external library called Lightweight Pure Javascript the name says it all.

Uso Básica

Import the file

<script src="input-mask.js" ></script>

Application example for the Date field

new InputMask().Initialize(document.querySelectorAll("#date"),{
  mask: InputMaskDefaultMask.Date, 
  placeHolder: "Date: 01/01/2015" 
});

In the library you will find more examples like the phone validation and Social Security Number (SSN)(like the identity here in brazil) you can read the examples and apply on your page the way you want.

You can view this working external library here.

Clicking here to view the Source.