How to Display Error Message to User
Aug 15, 2023
How to Display Error Message to User
How to Display the error message to the user. In this lesson, we are creating a simple and very interesting error handling. We are creating an email validation in this tutorial. So we will first check the email is empty or not then we will check specified email is valid or not.https://drive.google.com/file/d/1rYM2 …www.dailywebtuition.com www.flaticon.com https://www.bensound.com https://www.pexels.com
Content
2.57 -> Hey, everyone welcome back to daily tuition.
17.35 -> In this tutorial I will show you the best
use of tooltip.
21.869 -> In the last video we design this tooltip.
24.839 -> In this video we will use this tooltip for
error.
28.91 -> So if you wanted to show an error message
to the user then the tooltip will help you.
33.92 -> We will show you how it�s possible.
37.49 -> So before we start this video make sure you
subscribe us and press the bell icon to get
41.93 -> notified of my every new video.
44.21 -> And also press the like button if you find
anything useful in this tutorial.
48.01 -> So as always we say, before we getting let
let�s get started.
52.719 -> First we will remove these three label which
we had created in the last video.
58.44 -> Then we will remove this d flex class and
add validation class here.
66.4 -> After that we will add margin top 15% to this
row.
83.03 -> And here we will add an email textbox.
85.44 -> We specify id email, placeholder email and
class form control.
98.88 -> So this will create a new textbox here.
106.21 -> Then in style.css file we will align this
tooltip properly.
113.27 -> And then remove text from the tooltip.
115.04 -> We will use jquery method to add text to the
tooltip.
123.38 -> In style.css file specify display none property
to this tooltip.
128.3 -> We don�t wanted to show this error message
when the page load that is why we added the
134.44 -> display none property.
138.36 -> Afterward, we will copy the jquery script
tag from this website and paste it here.
148.33 -> Then we will create main.js file for creating
a script and link this file to index.html.
163.39 -> After that we will create document dot ready
function in this function we will create a
169.7 -> focus event on email textbox.
172.93 -> So we will select email textbox using email
id and create a focus out event.
192.18 -> In this event we will check if email textbox
is empty or not.
197.7 -> So if email is not empty then we will execute
if statement otherwise we will execute else
205.06 -> statement.
206.68 -> So if email is empty we will specify text
for the label using text method.
215.93 -> So we will select label using error class
and using text method we will specify the
222.6 -> error message.
224.8 -> And then we call fadeIn method of jquery.
228.54 -> This method will create fade in animation
to this label.
233.15 -> After this we will check if the email is valid
email or not.
238.62 -> So to check the email we will create a function
here validation email and pass eval parameter
245.63 -> to this function.
248.05 -> After that to check the valid email we are
using the regular expression.
253.64 -> So we create a variable and specify valid
email expression to this variable.
260.32 -> Then we will create if statement where we
will check email using test method.
265.82 -> So in if statement we insert test method and
pass the function parameter here.
272.35 -> If you wanted to know about function then
just comment me I will make a lesson on the
277.39 -> function.
278.39 -> Now if your email is valid email then we will
return true else we return false.
285.66 -> I will align this in the single row.
293.65 -> So here in if statement we will create another
if statement and call validate email function.
300.43 -> In the function parameter we specify the email
dot val() function.
305.76 -> Val function is not necessary.
309.06 -> So here if you put the valid email if statement
will execute else we will execute else statement.
318.76 -> So in the else statement we specify the error
message to the label and also add fade in
325.77 -> animation to it.
328.75 -> When you specify invalid email you will see
this error message here.
337.8 -> So when you specify the valid email in the
email textbox we will just remove this error
342.89 -> message using fadeout function.
345.84 -> Let�s check out how this work.
348.93 -> So when you leave this textbox empty you will
see this email required error message here.
354.75 -> And if you specify invalid email then you
will see this invalid email message here.
361.1 -> And if you specify the valid message here
then you will see the error message was gone.
365.92 -> So here we use tooltip for require field validation
and email verification.
371.48 -> You can use this for different type of validation
like range validation, birth date validation
377.139 -> and so on.
378.139 -> Download this project from the description
and practice it with creating different type
383.27 -> of validation.
384.97 -> Like this video if you find anything interesting
and useful.
388.08 -> Comment me if you have any question or request.
390.18 -> So that is all for now.
391.54 -> We will see you in the next video till then
be happy and keep watching.
Source: https://www.youtube.com/watch?v=Sxm7lV03KlY
