How To Make Form Validation Using JavaScript | Validate Form Using JavaScript

Поделиться
HTML-код
  • Опубликовано: 7 фев 2022
  • Learn How To Make Form Validation Using JavaScript | Validate Form Using JavaScript Step by step Tutorial
    In this video we will learn to add validation in a contact form using JavaScript. In this contact form we will validate the name, email, phone number and text message field using JavaScript. Please download the starter HTML and CSS file of this contact form design from the link given below and start adding form validation along with this video tutorial. #JavaScriptValidation #EmailValidation #PhoneValidation #JavaScript #FormValidation
    For Domain and web hosting
    Visit Bluehost: bluehost.sjv.io/e414GQ
    Bluehost tutorial:
    • How To Make A WordPres...
    Download the starter HTML CSS file:
    drive.google.com/file/d/1MNHd...
    -------------------------------------
    Recommended Videos:
    Learn Complete HTML and CSS from basics:
    ► • HTML And CSS Tutorial ...
    Make A Complete Website for college using HTML & CSS:
    ► • How To Make A College ...
    How to make a Business website step by step:
    ► • How To Make Website Us...
    How to make personal resume website step by step:
    ► • How To Make A Website ...
    How to make an Ecommerce Website Design:
    ► • How To Make eCommerce ...
    How to make travel website design with HTML CSS Bootstrap:
    ► • How To Make A Website ...
    -------------------------------------
    ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
    Join Channel Membership:
    ► / @greatstackdev
    -------------------------------------
    Like - Follow & Subscribe us:
    ◼️ RUclips: goo.gl/tTFmPb
    ◼️ Facebook: goo.gl/qv7tEQ
    ◼️ Twitter: / itsavinashkr
    ◼️ Instagram: / iamavinashkr

Комментарии • 145

  • @berenikajakoubkova6300
    @berenikajakoubkova6300 Год назад +7

    This is the first tutorial I found that covers exactly what I needed, thank you!

  • @jojid.econar280
    @jojid.econar280 2 года назад +41

    This channel is really one of my major source to become a web developer someday. His tutorial is better than enrolling in an online class😀 Kudos to your sir!

    • @LearnwithMrWebDev
      @LearnwithMrWebDev 2 года назад +2

      you can also learn web developmemt from my channel

    • @arsh10x
      @arsh10x 2 года назад

      I agree bro 💯

    • @hiwotina26
      @hiwotina26 Год назад +2

      I agree as well. He presents in less time what others will take hours. Good job!

    • @onlyshorts1923
      @onlyshorts1923 Год назад

      Bilkul bro....What a lesson by the channel owner sir

    • @piuskarish8778
      @piuskarish8778 Год назад

      I totally agree

  • @macklenejohnstine6859
    @macklenejohnstine6859 2 года назад +2

    This channel adds value in my life

  • @s.m.shahriar6658
    @s.m.shahriar6658 2 года назад +2

    Wow. You’re wonderful tutor. You desrved this subscription. Keep on teaching us more. Take ❤️

  • @CharlieMeye
    @CharlieMeye Год назад +1

    amzing, straight to the point and easy to grasp

  • @mhk6516
    @mhk6516 2 года назад +8

    Because of this channel only I attended interview and got selected also...
    Really Helpfull and thank you so much sir

  • @geezmedia2343
    @geezmedia2343 2 года назад

    you are simply amazing, your lectures are easy to grasp. Thank you so much.
    more JavaScript or Node.js videos, please.

  • @mayayadhu
    @mayayadhu 2 года назад +1

    Nice hats of to you for clear explanation thank you sir 👏👏👏👏👏👏

  • @shashisharma5138
    @shashisharma5138 2 года назад

    Finally it is there I needed this for my website

  • @iamuzzalhossen
    @iamuzzalhossen Месяц назад

    You made it very easy! Thank you

  • @nimishasenthil1549
    @nimishasenthil1549 9 месяцев назад

    Thank you so much for this valuable video🙏🙏🙏

  • @Taher_M
    @Taher_M 2 года назад

    Thank you, this video was really helpful

  • @wfem12
    @wfem12 Год назад

    Thank you brother, it helped me a lot for the project I'm doing😃

  • @baharehbazari1756
    @baharehbazari1756 Год назад

    Thanks a lot, This tutorial was beneficial.

  • @humzaasif1749
    @humzaasif1749 2 года назад

    Thank you so much 🥰 for the help

  • @silvanasosa950
    @silvanasosa950 2 года назад

    amazing!!! thanks so much!!!! keep making videos like this..

  • @sonamohialdin3376
    @sonamohialdin3376 Год назад

    Very helpful tutorial thank you

  • @preranaramteke9326
    @preranaramteke9326 Месяц назад

    Wow 😳😱 Thankyou very much

  • @lukekoletsios3236
    @lukekoletsios3236 10 месяцев назад

    thanks for the video, I'm learning programming by myself and these are very helpful for beginners like me.

  • @lubnahaddad10
    @lubnahaddad10 Год назад +1

    Thank You SO MUCH 🥰

  • @surajmendhe2594
    @surajmendhe2594 9 месяцев назад +1

    Thank u sir that's help me a lot

  • @abdulmoiz9075
    @abdulmoiz9075 2 года назад

    dhanne waad apka boht boht love you ho gaya

  • @ehsanm843
    @ehsanm843 Год назад

    thank you for this tutorial is very helpful , in last function when use if statement is better check the condition with {and} operator for check all input , is better then {or} operator . use maxlength attribute to set limit input value .

  • @ranisah8211
    @ranisah8211 Год назад

    It' was Amazing👍

  • @xertmediagroup
    @xertmediagroup Год назад

    fantastic channel keep it up

  • @xertmediagroup
    @xertmediagroup Год назад

    very good descriptive video

  • @yours_positively
    @yours_positively 2 года назад

    Very very nice and beautifully teached 👍.. We want email function .. Will you make a video for that

  • @yasiruchamudithawijesinghe
    @yasiruchamudithawijesinghe Год назад

    Thank You, sir

  • @sahiraahamed
    @sahiraahamed Год назад

    This is wat I wanttt.. 👏

  • @petermwansa4890
    @petermwansa4890 4 месяца назад

    Thank you

  • @mirrorforlife407
    @mirrorforlife407 Год назад +1

    awesome bro 👍

  • @tharindu_sandaruwan_official
    @tharindu_sandaruwan_official 2 года назад

    hello friends... amazing video avinash sir

  • @atef_jamal7016
    @atef_jamal7016 Год назад

    Great !!♥️♥️

  • @omorfaruk6986
    @omorfaruk6986 2 года назад

    just awesome project thanks bro please bro give more vanilla javascript project please

  • @heyjohnnydeveloper
    @heyjohnnydeveloper Год назад

    thank you !!

  • @abdulsameer3496
    @abdulsameer3496 Год назад

    Thank you so much brother... 😇😇

  • @DeepakLalchandaniProfile
    @DeepakLalchandaniProfile 2 года назад

    Joined as a member

  • @329bablu8
    @329bablu8 Год назад

    Very well :D

  • @muhammaddaniyal9042
    @muhammaddaniyal9042 2 года назад +1

    Best

  • @edpicmcgamson9923
    @edpicmcgamson9923 Год назад +2

    Can you create a tutorial on how to verify the user's email when they register? Thanks so much!! Love from Indonesia ❤❤❤

  • @igorbonicib
    @igorbonicib 8 месяцев назад

    is it not better to put the onclick event in the js code to keep it separatly form the html struckture ?

  • @konstantinreut2577
    @konstantinreut2577 6 месяцев назад

    Thank you for the lesson. That's very useful. Sorry for I mention that, but condition for phone input if you input letters doesn't work properly. Only after you input ten letters the error message will appear. But what about if user will input less than 10 letters. So the condition should be improved. But thank you anyway!

  • @siya1814
    @siya1814 Год назад +2

    Thank you for the video, but my valid sigh is not appearing even If I write full name it shows write full name.

  • @rahbarnavaid2952
    @rahbarnavaid2952 2 года назад +2

    Plzzz bro add some fields like Dropdown and date-select input box.

  • @STKnowledge-ik8rb
    @STKnowledge-ik8rb 2 года назад +1

    Can you pls create a video about how to create a login and a registration form from php and myslq?

  • @techdrug901
    @techdrug901 Год назад +2

    Sir pls make a video on localstorage to setdata in register form and get data the same data in login form thanks

    • @GreatStackDev
      @GreatStackDev  Год назад +1

      I have tutorial for set data and get data in local storage, but it's not for login and register. Please check if it can help you with that: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @manmathkar5928
    @manmathkar5928 2 года назад

    If we have to print the whole data when we use submit button what to do?
    Please Answer

  • @learnerstreet
    @learnerstreet 5 месяцев назад +2

    how can i send this from data to database after validation success

  • @sakisZsakis
    @sakisZsakis 2 года назад

    i have a second button CANCEL that returns to privious page but if i have a mistake and click the submit button the CANCEL button dissapeared. what can i do ?

  • @asasintechnofani4816
    @asasintechnofani4816 Год назад

    your content its good but very long

  • @strunkizin
    @strunkizin Год назад

    Does anyone know if the download of the JS part is available?

  • @anisajilani7735
    @anisajilani7735 2 года назад +1

    Sir making a product admin website where we add product

  • @crazylearn8312
    @crazylearn8312 2 года назад +1

    Plz sir making a product adding website

  • @atenakarimis
    @atenakarimis 3 месяца назад

    Thank you so much sir🩵

  • @12nov83
    @12nov83 Год назад

    sir i need fontawesome icon download and for paste link.. is available?

  • @dididudu2072
    @dididudu2072 Год назад

    If i use this in blade laravel it wont work. What could go wrong?

  • @bibakomk
    @bibakomk Год назад

    This didnt work for me...do we need to add an action or method to the form element?

  • @aneesdeveloper110
    @aneesdeveloper110 2 года назад

    bro i have 1 problem you can solve
    problem is i can made javascript page but it's not working tell me

  • @TheKnowledgeExpress
    @TheKnowledgeExpress Год назад

    Unbelievable

  • @manthanbhosale6255
    @manthanbhosale6255 10 месяцев назад

    I have a problem... My manager has given me task to create only one function for validation... Can you help with that...?

  • @dadi_vlogs3254
    @dadi_vlogs3254 6 месяцев назад

    Hello gentleman, I have a question
    The question is?
    what's the difference between :
    Submit And
    Submit

  • @RafinhaThunder
    @RafinhaThunder 2 года назад

    Autentication with backend pls.

  • @SahraHayal
    @SahraHayal Год назад +1

    I'm trying to do following this tutorial but I need to use images check and error icons from a local file. How can I do it? I need to do my work before 2 feb and I'm desperate

    • @GreatStackDev
      @GreatStackDev  Год назад +1

      instead of icon code that is written with tag
      just add tag
      like: or then add CSS for img to design it

    • @SahraHayal
      @SahraHayal Год назад

      @@GreatStackDev thank you!!! I will try again. ❤️

  • @neventerzic6853
    @neventerzic6853 2 года назад

    For some reason I get error Phone no should be 10 digits even after I get 10 numbers, unless I remove ! mark, then is shows check mark, but in that case it shows Only digits please till I get to the 10

  • @teluguadda2388
    @teluguadda2388 Месяц назад

    what if uname contains Numbers please tell me

  • @oliverhilmarsson7864
    @oliverhilmarsson7864 Год назад

    why cant i use the return statement on the onclick button?

  • @zeus0x015
    @zeus0x015 2 года назад +1

    just question . There are countries where a person who wants to buy an educational course cannot pay the amount via PayPal. The course owner gives a code to enable the customer to activate the course.
    And the code only works in that customer's account. How is it?

    • @frictiongraphics116
      @frictiongraphics116 2 года назад +1

      Hi sir this is a very good question 👍

    • @frictiongraphics116
      @frictiongraphics116 2 года назад +1

      That is the code is made private and the Website back-end is scripted to enable one person one code

    • @frictiongraphics116
      @frictiongraphics116 2 года назад +1

      It's as to my knowledge

  • @timepassvideos4747
    @timepassvideos4747 2 года назад

    Multistep form tutorials plz

  • @sultanaldfere2365
    @sultanaldfere2365 2 года назад

    ok

  • @sahilsonvane5052
    @sahilsonvane5052 5 месяцев назад +1

    Thank You So much GreatStack.
    can anyone please explain me more about this function and condition [ match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/) ]

  • @firozajilani9316
    @firozajilani9316 2 года назад +2

    Sir plz making product add website in which when product add and page refresh the product was not deleted

    • @crazylearn8312
      @crazylearn8312 2 года назад +1

      Yes sir I am trying to make it just still not made

    • @ATULSHARMA-sn2zv
      @ATULSHARMA-sn2zv Год назад

      Store them in local storage so they will be there after refreshing also

    • @Prrimcord
      @Prrimcord Год назад

      Learn good English first!

  • @MsAtifMehmood
    @MsAtifMehmood 2 года назад

    nft marketplace.

  • @goachingoulding3926
    @goachingoulding3926 2 года назад

    ALSO IS SAYAN KRIANGKING

  • @techno_pot
    @techno_pot Год назад

    My data is not vanish after submit ..i think my data nit getting submitted.

  • @dheeru.rajpoot
    @dheeru.rajpoot 2 года назад +2

    How can I redirect user to homepage of website when form is submit.

    • @frictiongraphics116
      @frictiongraphics116 2 года назад +1

      Sir I think u are talking about this video concept 👍

    • @uniqueyroasts
      @uniqueyroasts 2 года назад

      window.location.href = examplewebsite.com/home

  • @syedwaliuddin3656
    @syedwaliuddin3656 Год назад

    What if we want to show alert message after filling all input fields correctly ? Any help ?

    • @missulu
      @missulu Год назад

      Check for input and write an 'alert' to pop up. Also, if you don't have what you need, you can alert to that as well.

  • @letthemcode7199
    @letthemcode7199 2 года назад

    could we use the same thing, but change the names of the boxes and make a questionaire for our website?

    • @frictiongraphics116
      @frictiongraphics116 2 года назад

      Yeah sir obviously

    • @frictiongraphics116
      @frictiongraphics116 2 года назад

      Like u can insert h1 as - what is your name?
      And the textbox or placeholder as answer typing box and use the javascript the make these kind 👍👍
      Good question and good thinking 🤔❤️

    • @letthemcode7199
      @letthemcode7199 2 года назад +1

      @@frictiongraphics116 think you missed the point of question asking. The smartest thing you can do is ask for help. the wisest thing you can say is 'i do not know'.

  • @md.sharifullislam4428
    @md.sharifullislam4428 2 года назад +2

    when i write full name. don,t show valid. why do it? plz help me

    • @smiggu5982
      @smiggu5982 2 месяца назад

      Check your regex.

  • @kellykuagba2657
    @kellykuagba2657 6 месяцев назад

    Hi Good Evening Mr GreatStack,
    Please my icons are not displaying despite copying n following your code.
    Please what can i do??
    Thank you

    • @Ploki_Star
      @Ploki_Star 4 месяца назад

      Mine are also not displaying, have you been able to solve them?

  • @aorippedbandaid3711
    @aorippedbandaid3711 9 месяцев назад

    in the form validation, a name followed by a space is showing as valid as in
    'name ' is valid while 'name' isn't. How do you make it so that it shows invalid until a word followed by a space and then another word or n number of words is type.
    As in '1stname 2ndname' == valid and '1stname 2ndname ' is not valid(due to space at the end)

    • @mickey9818
      @mickey9818 7 месяцев назад

      That's because the regular expression isn't well defined. Use this instead, /^[A-Za-z]+\s[A-Za-z]+$/

  • @computerprogramming2377
    @computerprogramming2377 Год назад

    In the my system it's work for 1st input box only... Why frustrated 😐😐

  • @muhammadumer9956
    @muhammadumer9956 2 года назад

    Can you please make a complete tutorial on how to make a ptc website using html and css

  • @sarthaksingh7570
    @sarthaksingh7570 Год назад +1

    This much code just for email validation..... Imagine how much he will wrote for a form handling........

    • @missulu
      @missulu Год назад

      LOL Too funny, it takes the size it takes! Very funny!

  • @jayraldalbos1440
    @jayraldalbos1440 Год назад

    What if validated when click button get into another page?

    • @missulu
      @missulu Год назад

      That works, but you should make it rejected at that point. It's easier to validate before sending the form.

  • @aakash3505
    @aakash3505 2 года назад

    ARE YOU FROM NEPA;

  • @DeepakLalchandaniProfile
    @DeepakLalchandaniProfile 2 года назад +1

    Where is the complete source code. Please upload it, which book ur using for css and html and javascript

    • @GreatStackDev
      @GreatStackDev  Год назад +1

      Here is the code for this video: ruclips.net/user/postUgkxAlMZD3y0UAZTckDogn3tuTLs2BRka78O
      I am using only online resources for learning.

    • @DeepakLalchandaniProfile
      @DeepakLalchandaniProfile Год назад

      @@GreatStackDev can you create a tutorial on cascading dropdowns of Country,State,City using html,css,and javascript

  • @Maxnine9
    @Maxnine9 2 года назад

    make NFT project website(one page&inside scroll)

    • @frictiongraphics116
      @frictiongraphics116 2 года назад

      Bro I have to first design your website using any web designing softwares.
      I suggest u to use Figma
      It's is a free software a d open source with the desktop app.
      U can design any website, mobile app (android, iphone or any) and then design the same with html css and javascript.
      I suggest u to design something that u think so that u get a better idea to continue with programming ❤️❤️

    • @frictiongraphics116
      @frictiongraphics116 2 года назад

      Send me - hi I am so and so u had replied to me on Easy toturials youtube channel comments ❤️❤️

    • @MDev1460
      @MDev1460 2 года назад

      @@frictiongraphics116 bro can we please chat in private if you don't mind, i really need some help here

  • @PhoneUnlock-vd8rl
    @PhoneUnlock-vd8rl 2 месяца назад

    Bro else part mai kya hogaa vo to btaa dete

  • @walidhassoun6260
    @walidhassoun6260 Год назад

    where we can have the code?

  • @user-bb3rl9lt9q
    @user-bb3rl9lt9q Год назад

    if he does not enter the data, will he follow the link ?

    • @missulu
      @missulu Год назад

      If it's needed, the validation should stop the form from being forwarded. I've done it both ways, it depends on whether or not the information is necessary.

  • @mkamranusmanipk
    @mkamranusmanipk 2 года назад

    please share the javascript code thanks

  • @mahmoudwahba9588
    @mahmoudwahba9588 2 года назад

    i wanna the regex code pls 😅😅

  • @user-rt7ql9di7l
    @user-rt7ql9di7l 4 месяца назад

    8. Feb.24

  • @shivangisharma7400
    @shivangisharma7400 Год назад

    not working

  • @shraddhadeshmukh5810
    @shraddhadeshmukh5810 2 года назад

    13th

  • @victorzuniga8894
    @victorzuniga8894 2 года назад

    This is good, but the regulars expressions are so bad... I mean, I think there should be better expressions to valid all, because these in this video are awful validating.

  • @lakshyarajdash
    @lakshyarajdash 2 года назад +1

    I never expected that this guy will give paid source code. Think of a junior developer who has no money and cannot join your membership, then he/she cannot follow your video. I would have been better if you have shown how you designed the page.

  • @user-ty7lw3rr6g
    @user-ty7lw3rr6g 2 года назад

    Please use hindi

    • @frictiongraphics116
      @frictiongraphics116 2 года назад

      Bhai he has another youtube channel where he make hindi explanations of the videos

  • @kevinandres449
    @kevinandres449 Год назад

    soy gay

  • @yuritian8830
    @yuritian8830 7 месяцев назад

    input.addEventListener("inupt", handleInput);