Javascript Form Validations

JAVA SCRIPT VALIDATION

Java script Form Validations

(00:00)

Hello guys, welcome to our series Java script.

In our last segment, we covered all the properties of DOM i.e. Document object Model, and with the last segment, our DOM has completed.

So guys, I hope you have practiced all practical, it's methods and properties which we saw in DOM.

Let’s move further in today’s segment,

We are going to focus on form validation in today’s segment.

And in the next segment as well, like how forms can be validated through Javascript, usually when going through any website there are forms on our website.

For example, if I open learnvern’s site here,

And I click on join for free then I can see a form here in which, there are many fields like full name, email address, mobile number and create password.

This is the case with every website not only learnvern,

you will always see any contact us or Join for free forms,

so when we see such forms,

let’s say, I click on this first field full name in learnvern’s site,

And if I click somewhere else without entering anything then,

you can see, this full name has been focused and as soon as I focused out of there, a red border appeared,

And we can see a cross also which indicates I focused it, but I did not add anything.

My full name remained null.

(02/00)

Now, if I type any name here then on successfully adding name here,

you can see a tick mark. which indicates, the given text or input is correct or acceptable,

then if I go on email address and add anything like abc and I press enter then,

as we know email address has a specific format like a name then at the rate and then domain name,

and as I have simply added abcd so it is showing me error that you have not given a correct e-mail address but if I type abcd @mail .com then,

it will change to correct value which indicates that entered email is in correct format, if I remove abcd@ then it becomes wrong.

Means in our form, based on the inputs, by user, we form validation at that moment only,

This validation is done with the help of Java script,

to check whether the entered data is correct or not.

Based on the input in our input field we have many conditions and criteria,

For example as you can see here, first is full name, second is email address and after that mobile number.

Now in full name, definitely characters or alphabets will come, email address will come in a format like we have @ sign and dot and mobile number needs to be made up of numbers only,

if I add characters instead of numbers then it will show error,

which is a right error because mobile numbers are made up of numbers only.

I hope you are clear.

So all this is based on input…

And it is controlled as if text is asked then we can’t write numbers,

If a number is asked then, we cannot write text.

If email is asked then it should be in proper format,

if it is password then, it has to fulfill the given criteria that is it should match so and so condition.

All these things are checked through validation and this validation is done with the help of Java script.

Now let’s go back to slide,

We will see how to validate form in today’s segment.

First is why form validation is necessary?

As I explained you same thing is given over here in slide,

validating a form is important because validation is must to authenticate user means if validation has been done properly then only our user will be authenticated,

means if I am entering any data then it will have an attached phone number,

if my phone number is verified that is kind of validation that this is so and so user,

we have many cards let’s say aadhar card, voting card etc, even that has a proper number which is dedicated to proper person,

if the number on aadhar card is verified, it indicates that so and so person exists.

(05:13)

So all this comes under validation also known as authentication means proving yourself,

so for authentication we use validation.

“Java script provides a facility to validate the form on the client-side so data processing will be faster than server-side validation.”

Now here, we have two words client-side and server-side, client-side means where user is using, when we load webpage along with that, we load Java script file.

It means here, In example, when we took learnvern’s form.

If I am adding it currently then, it will be verified from my end only.

On submitting data when it goes to server it is not verified there,

some checking can be performed at server side whereas some checking ends at client side only,

 so the ones, which take place at client side then, we do some by javascript and if some data has to be checked at server side then, in that case, whatever we enter that goes to server side, there it is checked and then again we get response that whether the user has entered correct data or not.

For example in full name, email address and mobile number the format of full name should be text, format of email address should be correct and mobile number should contain numbers.

All this validation can be performed on client side,

Okay, clear up till now..

Now the mobile number, which I have entered whether it is right or not, is checked on server side,

So here, we have two things which means the things which we have added validating it by format is at client side, but whether the given data is correct or not is done at server side.

At server side, we mostly use languages like php for server side validation,

Here most of the web developers prefer Java script form validation.

As it is written here, we use java script for form validation,

Apart from Java script, J Query is also used for form validation which we will see in course of jQuery,

currently we will see how form is validated through Java script.

Through Java script, we can validate name, password, email, date, mobile numbers and more fields.

Understood ?

Now, we will take an example here.

We have multiple examples.

First example is validate the name and password, means check name and password,

In name, what can we check?

The name which we have added should not be empty.

As we saw here,

please enter a name, as soon as I add something my error will go and when I keep it empty error occurs.

It means what are we checking in name?

that name field should not be empty after clicking on submit,

so validate the name and password, so in our program how will we check that it should not blank?

And how will we check the password ? That password should be more than 6 characters?

Means it should contain a minimum 6 characters for that.

What will we do?

(typing program : Be slow)

First we will open sublime text.

And in sublime text here, we will… set html (7 seconds pause; cursor movement first and then typing) form validation 1 (4 second pause ; typing). 

And here, we have started structure in our program and we will save this. (4 second pause ; typing).

So, what do we have to do? 

If we have to check name and password for that, first we will take two input fields in which name and password will be there,

For that we will take the form and here the h3 ( 6 seconds pause ; typing) registration form (13 seconds pause ;typing) so, we will add this much and run the program.

So we can see, what we are getting in the program,

so you can see here, our heading has been generated Registration Form.

(Done)

(09:50)

Now, we will.. add some things in form,

like form name… and in name, we are writing,

let’s say, usually we take my form,

means if we submit our form it should go somewhere,

so for that if you have attended our learnvern’s html course then,

in that we taught form in which we add attributes like name, method and then onsubmit method and in which way are we submitting this? and where is our data getting submitted? We check all these things,

on getting submitted our form goes where instead of that if we add a button,

so when we click on submit button then validation of form submission should be performed.

For example true or false,

So what can we do?

Here, we can write a method,.... post…

And our form is not submitting anywhere so we will not add action,

but on submit, we will call a method called return (4 seconds; typing) validate form,

means whenever we click on the submit button kept in this form then,

we will get some output which will be validate form named function’s output,

So for that what will we need?

As in our program we require name and password.

(typing program : be slow)

so let’s say here, I take an input field… type equal to text…. and name equal to…. name, br and after input… we have password so for that name…. and password…. input… type equal to… password… and name equal to… password,

that’s it,

(done)

we don’t require anything more than this.

Now the last thing which we require is a button,

so input, as it is submit button so we will take input type equal to submit and,

we don’t require name as usual and we need value and it will be submit.

As we have kept on submit here, we are not keeping any method here, on click and if we don’t keep this then our button which is type equal to submit in that we have to keep our onclick event,

if I save this and reload the program then, you can see name password and submit button appears here,

To show it properly, we will add br two times …

So here, we have a name, password and submit button….

okay ! clear! 

Now what can we do?

As our function is validate function, (5 seconds pause ;typing)

What do we have to write in this function?

Then in that, we have to add as it is name and password so first we will get the value of name and password,

So for that what will we do?

Variable.. name equal to, as we have taken name and password inside form so we can write, document.. dot.. my form.. dot.. and name.. is name.. dot value,

that’s it.

And we will repeat the same thing for the password. So here, we will write a password because here our name is password,....

so whatever values, we will have in input field of name and password has been stored in these two variables,

Now, we have to set an alert as whenever our name will be incorrect a message will appear in the alert box like entered input is wrong.

And if our password is wrong then, still a message should come in alert box that wrong password has been added.

So let’s say, we add this if, this condition is related to our name.

So here, we will write if name,

now this name indicates this name if name equal to… equal to… null…

And this is our or sign… name equal to equal to this,

this indicates it is empty, giving space or keeping it empty indicates it is empty,

so null will also indicate empty and empty will also indicate empty,

What will we get in if condition?

First we will alert it, ‘please enter name’ when we will keep it empty and we will come out by returning false because this form should remain as it is.

Else if name is correct then again we have to check,

so else if and in this our password,

Now what was our condition for password?

That it should be more than 6 characters,

so password dot length is less than 6,

What will we return?

First we will return an alert,

(typing program, go slow)

‘the password.. must be.. at least…of.. (4 seconds pause; typing) 6 characters long’

so this is our alert,

In this also, we will write return.. false,

 that’s it, we don’t want anything more than this, so save our program.

(done)

(15:35)

Now I will reload this,

let’s say I click this and keep it empty initially, I will not add anything and submit.

so here, you can see please enter name or instead of,

please enter a name, we can write ‘ name… cannot be… blank,’

submit. name cannot be blank okay,

now, we have not added password yet,

so we don’t have any alert about password,

clear or not ! Okay ! so,

let’s say here, I add my name Joel and submit,

Now, which condition is getting checked?

password’s condition is getting checked,

this if we have written where?

So if this if is getting executed,

and if some mistake occurs, then it will come outside from here.

only because, we have written here return false,

return false and this we have written here so our page will not be reloaded.

As you can see, if we had not written this here then our page would have been reloaded.

Now when the password is still remaining,

and I have not written the name then,

password must be at least 6 characters long, okay.

so, now I will write I have added exactly 6 characters,

on submitting this alert box disappears.

Our condition is ‘our password should be 6 characters long.’

let’s say now, I add any name two characters long so here again we can see,

password must be 6 characters long,

so far, I added a 6 characters long password and it will always show that this password is wrong.

So here, we have created a registration form,

in which, we have validated name and password, 

we have checked only the name should not be empty, we have not checked the value,

and in the password, we have checked its length,

Now, we will go back to our slide,

so here our question, validate name and password finishes here.

 I hope you have understood so far.

Next is,

 “retype the password and the entered password should match”,

means you must have seen many forms in which, after entering password one time, we have a field for confirm password or re type password.

so means, if we have to add password two times then,

if both the passwords does not match then, we get an error that both passwords are not matching, unless our both password matches, error will be shown,

If the password is right and both passwords are matching then only, we can move forward, so we can do this also in program.

How can we do this?

Let's say I copy this program here.

And I will keep this much function and here, we will keep the registration form and we will remove this.

we don’t need this. that’s it,

So here, we are generating the same things, so save…

And here what will we take?

We need two input fields one for password and one for confirm password.

So first, we will add that.

(typing program; go slow)

input type equal to… password name equal to.. password… and two times br… and here, we will write password… and same thing, we will copy here and we will write confirm password in which, type will be password and name will be confirm password. okay,

here, we will take a button.

so that will be input.. type equal to.. submit… value.. submit.

so this will be our form and this is our program,

so password and confirm password.

Now here in validate form,

What will we write?

In this, we want both the values and we have to check whether they are same or not?

So first, we will take a variable.. password equal to… as we did earlier, document dot my form dot password dot value… same thing, and here, we will write confirm.. password so both values are here, and now, we have to simply match these.

So here, we will write ‘if password equal to… equal to …confirm password’.

(20:10)

If this is right then,

we will return true or if this is wrong then. in else, we will alert,

‘password.. doesn’t.. match..’

in this, what will be returned?

False, okay,

This is a simple program. so save and run,

let’s say here, I write 1 2and 3 4 submit, ‘password doesn’t match’

 means both passwords are different.

so, what did I write here 1, 2 and if I write 1-2 again,

submit.

 so you can see, my data has been submitted.

As we have used post in our method.

so in URL, my method or the values which I have passed will not be shown,

but, data has been removed from here.

It has been reset which indicates my form has been submitted successfully,

so this was, how we can match two passwords,

so this was a very simple program of password validation.

understood up till now, good !

Next is third program,

“validate the telephone number field. If it should have only numbers”,

means the telephone number which I have added, in that , I want numbers only.

 if I add text in the telephone number then, I should get an error.

that it is wrong.

How can we do this through Java script?

we will copy this program, we will remove this and here also, we will remove this,

we have kept form and the button.

so first, input type equal to… text and in name, we will take telephone…

that’s it,

Now here, if my telephone is right then I have two options, I can show it with an alert or I can take a span exactly adjacent to this field that the number which you have added is wrong.

The two program which we generated earlier, we used alert in both the case,

We show it with help of alert box but in this program.

let’s say, we don’t use alert here, we will take span ,

So here, ( 4 seconds pause ; typing) telephone number.

and here, I will add span then I need to give id to span…

let’s say, I give an… ‘error telephone’ as id and then, ( 4seconds pause; typing) two times br,

so save this program and we will run this program,

So this is my program…. okay. telephone number.

clear ! okay!

So now, we have not added anything in span, that’s why we can’t see anything here,

Now what will I do in my validation form?

I will get value from here and while getting value what do I want?

I want to check the input and the value of telephone number should be compulsorily number only,

So for that what will we do?

Var… telephone equal to… document dot.. myform dot.. telephone dot.. value.

So in this, we will get our telephone’s value now. 

we will check if, if you remember then, in Java script, we saw value called as ‘isNaN’ (pronounce: is - N A N), ‘isNaN’ is used for checking not a number means,

to check the added value is number or not.

So if the input added in telephone, is not a number then I will show error, and if it is number then it’s fine our form should be submitted.

So if is…NaN,

if you have noticed the syntax is different here,

both the n are capital here, that’s why you have to make sure you write capital n,

here I will pass my variable telephone means, if telephone is not a number means, if true comes here,

then, document dot.. now I have to show error in my span… so document dot… getElement…ById..

What is my id?

‘error telephone dot’

which we did in our last segment through innertext,

innertext is used to show our error,

so innertext equal to… here we can use both the things html also and text also.

let’s say, for now, I use html and in that, I add… ‘enter telephone number is not correct’

fullstop.

(25:40)

Now after this, we will return false here…

because this is wrong (4 seconds pause; typing),

 and in else,

if above mentioned is not right,

means, the execution is wrong then the given input is a number then, in that case,

I don’t have to do anything,

return true,

that’s it.

save this program and reload it.

Now, I am adding numbers intentionally,

here, I have not added validation for length yet and we are not going to add that.

 we have to check whether our number is a number or not?

So if I submit this, then this will be submitted successfully.

means in my program number has been added in telephone.

Now if I add characters here. and then submit it.

 then you can see, I am getting error, entered telephone number is not correct,

means this time, I have not used alert here I have used span which will appear adjacent to my telephone number,

usually when we show error in this way, then we also add color to it,

So here, h3 hash tag.. error telephone and in this, I will write color… red.. font size… 12 pixel.. okay,

‘entered telephone number is not correct’,

this is very eye-catching also as this is an error,

so we have shown it in red color and this also gets focused when I see, so this is our proper way of showing error.

Now, if I reload this from here,

Now, I will add 1 2 3 4 R 5 6 7 and submit.

so you can see I am getting an error

Why?

because we have added one character.. in string, means this input is wrong this is not a number completely. so in this case, it also becomes valid.

So this was our form in which we have validated number means whether the entered data is number or not.

So guys in our today’s segment,

we did three things,

we matched password, we performed two validations on name and password that name should not be blank and the password should fulfill the criteria like it should be more than 5 characters and we matched two passwords and we also checked whether our entered input is number or not?

So here, except email we have performed validation is almost completed.

So guys, I request you to practice the three practical which we did today so that validation will be clear to you and your knowledge in that section will be strong..

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

In the next segment also, we are going to continue our validations,

In today's segment only email is pending, so that email validation we will complete in our next segment.

Thank you.

(video duration- 29 minutes 05 seconds)