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?
And this is a scripting language. right?
Which is used to make your web pages dynamic.
I will show you this thing practically so that you can easily understand.
But all this was a little bit about java. right?
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?
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.
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.
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 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.
What is it?
Function oriented language.
How to work?
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.
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.
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.
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.
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.
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 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 when will we meet on the next topic..What will be our next topic ?
Ajax means how to store data without refreshing the database.
So let’s meet on the next topic.
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.
Django forms are only submitted if they contain CSRF tokens. It validates data in a simple and straightforward manner. The is valid() method is defined in the Django Form class and is used to validate each field of the form. If the data is valid, it returns True and stores it all in the cleaned data attribute.
To prevent malevolent individuals from abusing online forms, form validation is essential. One of the most common sources of security flaws is incorrect form input validation. It makes your site vulnerable to attacks like header injections, cross-site scripting, and SQL injections.
Form validation is required whenever we accept user input. We must check that the data entered is in the correct format, that it falls inside a valid data range (for example, date fields), and that it does not contain malicious code that could lead to SQL injections.
where will i get code access for the project source code?
this course structure is very good. I suggest for learning to this website.
Superb and amazing 😍🤩 enjoyable experience.
Er Komal Gupta
thnku so much sir. after waisting so mch time in boring videos.i learned only from here.explained vry well and i will suggest evryone that learnvern is the bst online plateform where you can learnalot
ajax lesson was something like boring . But , learned a lot with the sunit sir . Just learned how to deal with ajax in django