Javascript form validation in django

Hello guys, welcome to learn vern. The last topic we saw was on how to show an image on a browser using django where I showed you how to display the image on the browser, we uploaded that using django. right?

Now today's topic is javascript validation on html form.

Which means how to validate any particular HTML form through javascript, right?

So here you are going to use javascript particularly. okay?

First of all let me tell you, what actually a javascript is?

So javascript is a dynamic programming language in a way, which is used on the client side

And this is a scripting language. right?

Which is used to make your web pages dynamic.

Dynamic means you can pass any data through javascript.

You can make validations through javascript right?

So all these you can do through javascript.

And javascript is a very light weighted language, with its help, you can make your HTML page perform dynamically through a very small script.right?

I will show you this thing practically so that you can easily understand.

But all this was a little bit about java. right?

Now lets see some types of javascript.

There are 2 types of javascript.

One is internal javascript, And another one is external javascript.

If i talk about internal javascript, so internal javascript is written in your HTML file.

Where you need to use script tags, and only in these script tags, you can write your JS that is a javascript script. right?

And if you don't want to write your javascript in an HTML file then here you have another option which is an external javascript.

you can write here your script in dot JS file With the help of external javascript, .

And then you can link it to an HTML file okay?

In which what you have to do is, only use script tag And link the location of that particular JS file. right? Okay?

Now if i tell you an example of javascript.

So we are going to do an example of this type, where we will check if name or first name is displayed or not?

Which means, has the user entered it or not?

If he has entered, suppose this is first name, so in the first name we will use only and only alphabetical, we won't allow any numeric.

Because in any first name, you won't add any numericals.

Nobody’s name starts with numbers.

For example, hi 123.

No one has such a name.

So we will validate this thing over there. right? Validate means to check.

Like to check If the particular user has entered the validate things or not in that particular HTML form.

Right? Clear?

I will explain how to do it, I will practically explain it to you.

Lets go ahead to practicals.

So this is one of my HTML forms.

Which I have already made.

You already know how to make an HTML form.

I have told you in previous videos.

If somebody doesn't know. Then kindly watch my previous video of crud operation.

There I have made a full form to make you understand.

Right? Clear?

Now I have to validate this form.

How do I have to validate it?

Understand it, he added alphabets in the first name, that needs to be validated okay?

Second thing, to make sure that he doesn’t add numeric or any special character in the field of first name.

And third, it has to be checked that the particular field isn't blank.

If it is blank then over here, at this place.

In front of the text box, we need to print a message, okay?

So how to do it? Let's go with the practical part okay?

Okay, so this is a HTML code through which we are able to see the form.

What I have to do here is validate the first name.

So how will we do it through javascript?

So first thing what will you do ?

Here in the head tag what you will do is take a script tag.

What you will take is a script tag.

Take here script tag in this way.

Now what we are writing is internal javascript for the first name.

Javascript is a function oriented language.

What is it?

Function oriented language.

How to work?

If you want to make a function here in javascript.

So how will you make it?

Take here function right?

You can give whatever name of the function you want.

As I want to take it as “check f name”.

And made a function here.

So we made a function And in this function I want to define a particular variable.

So to define the variable, First of all You need to write “var” in JavaScript.

And then the name of the variable.

As I Took the name of the variable as f Ok ?

What do I have to do for the name of this variable ?

In this variable, whatever particular input Has The First name of the form.

In Input of first name of the form, I want to store whatever value is coming in the first name of the form in F

In variable f ok?

So how will we do it ?

First of all We will write a document here, ok?

This document stands for full HTML page right? Ok? Clear?

HTML page means this whole full page.

And in this document I have to find My form.

How will I find my Form? Frm.

Frm Means name of your form. right?

And dot, what do I need here?

Value of that input From the particular frm.

Which means if you want the value of first name input, so what is the name of first name input? Fname.

What will I write here? So first name.

And dot value.

This value is pre defined.

So here you are done.

Document dot form dot fname dot value.

What will happen with this?

Hope you are able to understand me.

Whatever particular values come here in particular f name. right?

Suppose imagine, ram came here, now where will this ram go?

Ram will go here and get stored in f okay? Right?

So in this particular way you are getting the value and making it store in variable f.

Now I have to create a Regular expression.

We saw the regular expression in Python, also JavaScript has regular expressions.

Right, so how to make it ?

So here I took a variable, R E G okay?

And to write regular expression What you need to do is, here is a syntax

 Slash Ok slash then power sign.

Then square bracket then Plus And Dollar sign ok?

Now here, this is your Particular regular expression.

Now you have to write your pattern in this regular expression.

Which Means we will write your pattern in this Square bracket.

How will the pattern be ?

Either a first name can have capital A to Z or a first name can have small A to Z.

You don't have to use a comma or any space.

You have to write exactly the same as I have written ok? Right?

And then we got these two things.

one is getting the value of input in variable.

And second got its regular expression in variable.

Now Validate the value through this Regular expression.

So How will we do it ?

First of all Here I will write one if condition.

If.

First, We usually check that The particular value which is coming should not be blank.

Make sure Input is not blank.

So how will you check ?

So here you will use f dot trim function.

 Which function ? trim function.

And it should not be equal to equal to blank.

You will check it.

Now what does this trim function do?

So trim Function is used to remove your space.

Suppose you wrote in your input, but a particular space remains around it.

So a trim function is used to remove That space. 

Now here we have to print a message.

And where should the message be printed?

Here beside the first name, Close to the text box right?

So what you will do here is, Create a TD on first name.

And in that TD, we will keep span.

Span tag.

Now the span tag is used to create a blank space.

We will give an ID to the span tag.

as we have to show an error in this.

So I gave the ID as an error ok?

Now what you have to do here is.

Here is a predefined function of Java.

What is the name of the function?

So let's see, write a document.

There Is a function as ‘Document.get element by ID’.

In this get element by ID function, What you have to do is..

Write the id of span and Whatever message that we have to show to the user has to be shown in this page itself so We will use dot inner HTML.

Here we will write ‘please enter your first name’.

Ok? Right? clear? Have you understood ?

we wrote First validation.

 For what did we write the first validation ?

To make sure that your input is not blank ok? Right? Clear?

Now Next is “else if”.

What is the second condition that we have to check?

Particular user entering his value should not be numerical.

he should add only the alphabets okay?

So with which we have to match it ?

With Regular expressions.

So what we will do is, “Not regular expression dot test” Is a method here.

And in the test, we will pass f .

Test method will check The value entered in the f is numeric or only the alphabet.

If it is not equal to regular expression .

So What we have to do is, Pass a message again.

What will we pass the message here?

Please enter Only alphabets ok? Right?

So two conditions .

First condition : our input should not be blank .

Second condition : the input which is entered Should not include any numeric or special character.

okay?Only alphabets are acceptable.

And the third part.

Else If everything is in order We won't display any error over there.

Which means everything is correct.

Users have added the alphabets only.

So will we allow him to proceed further ?

No, we need to call this function somewhere.

Only then this function of javascript will work.

So what we will do is Call this on “onblur event” of input.

Now this onblur event gets called through your tab button.

Means the tab button on your keyboard. right?

There are many events such as - on, hover, on mouse click..

Among All these events I am using the onblur event.

I will call the check_fname function With its help. Ok? Right? Clear?

Have you understood?

So here you have to call that function. Okay?

I will let you know about your message later.

I will tell you this concept later on.

First Let's check the concept that we have added, Is it working Perfectly or not?

Okay? So see here is our form. right ?

Here I will enter 123.

 123 means I'll add numericals.

So it should give us an error about only adding the alphabets.

So here is our error.

“Please enter only alphabets” okay?

Now what I will do here is Leave it blank.

As entered with tab After leaving it blank, What came here is Please enter your F name - first name.

What is this thing happening?

This is getting validated from JavaScript. right?

This error showing.. This particular error displaying Should be displayed in red Because error is always defined in red.

So how will we do it ?

You have to come back to coding, go to span.

Here You have to use styletag, and put the color as red okay?

So what color you have to do is red.

And then we will refresh it again.

Enter here 123.

So see here it turned into red right?

Now let's keep this blank.

So The first name is entered.

 But if i Enter everything here correctly.

As I enter here Rohit.

Then it will not show us any error.

So in this way you validate any particular field of form with JavaScript okay? Right?

In this way You can use JavaScript in your web development right? Clear?

So when will we meet on the next topic..What will be our next topic ?

AJAX.

Ajax means how to store data without refreshing the database.

Okay guys.

So let’s meet on the next topic.

Thank you.

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.