• Wednesday , 18 October 2017

JavaScript beginner tutorial 30 – form validation text boxes and passwords

Code Canyon



In this video I finally start speaking about form validation. I show you how to check if a form field has been left empty, and how to use a return statement in JavaScript.

Don’t forget to subscribe:
http://www.youtube.com/user/QuentinWatt Social links:
————————————————————-
Add me on twitter:

facebook group:
https://www.facebook.com/quentin.watt
————————————————————-

Original source

3d Ocean

Related Posts

33 Comments

  1. Joshua Carbajal
    July 29, 2017 at 18:42

    Thank you!

  2. Abe Prangishvili
    July 29, 2017 at 18:42

    Thanks !

  3. Петър Колев
    July 29, 2017 at 18:42

    Great video! Thanks 🙂

  4. kuldeep kumar
    July 29, 2017 at 18:42

    in onsubmit attribute where and what it is returning ?pl clarify

  5. Uros Djordjevic
    July 29, 2017 at 18:42

    Can someone help me, why this code is not working?! Its getting me on submission.html even when i dont type anything in
    <script type="text/javascript">

    function check_info(){

    var uName = document.getElementById("username");
    var passw = document.getElementById("password");

    if(uName== "" || passw== ""){

    alert("Please fill in all fields");
    return false;

    }else{
    return true;
    }
    }

    </script>

    </head>
    <body>
    <form action="submission.html" method="post" onsubmit="return check_info();">
    username:<input type="text" name="username" id="username">
    password:<input type="password" name="password" id="password">
    <input type="submit" value = "Login">

    </form>

  6. DoomFinger511
    July 29, 2017 at 18:42

    How do make it so when a user types in the wrong patter (like not using the @ symbol in an email) that a message appears? I want different messages to appear based on the field with the error.

  7. Rachapudi chandra shekar gupta
    July 29, 2017 at 18:42

    Nic teaching sir thankyou

  8. speedlearner
    July 29, 2017 at 18:42

    I'm about to post a webpage. It's an Italian tutorial. I want to charge people to get into advanced lessons. This webpage will have a password feature. I will send my customers passwords to access advanced lessons. How can I prevent people from selling the passwords I issue them? In other words, how can I make sure the person using the password is the person who purchased the password?

  9. Naman Khajuria
    July 29, 2017 at 18:42

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>validate form</title>
    <script type="text/javascript">

    function validate(){
    var username = document.getElementsById("username").value;
    var password = document.getElementsById("password").value;

    if (username == "" && password == "") {
    alert("please fill all the fields");
    return false;
    }
    else{
    return true;
    }

    }

    </script>
    </head>
    <body>

    <form action="cool.html" method="post" onsubmit=" return validate();">
    <input type="text" name="username" id="username" placeholder="Username"/><br>
    <input type="password" name="password" id="password" placeholder="password"/>
    <input type="submit" value="login"/>
    </form>

    </body>
    </html>

  10. Naman Khajuria
    July 29, 2017 at 18:42

    i am not able to perform validation on ma form i am doing excatly how you told to do so but on clicking on submit button it is still redirecting to next html page

  11. Truefit Collection
    July 29, 2017 at 18:42

    Thanks Quentin. It's awesome video.

  12. Todd Langdon
    July 29, 2017 at 18:42

    Great Tutorial… been looking for this info for months for one of my sites. Tried it and it worked like a charm. Thanks Again! Subscribed and Great Tutorial!

  13. Fire Hound
    July 29, 2017 at 18:42

    amazing wow thanks

  14. Carl Evans
    July 29, 2017 at 18:42

    Hey Quentin, is it better practice to handle events in our scripts rather than HTML?

  15. Matt Nilsen
    July 29, 2017 at 18:42

    Hi Quentin

    Why doesn't my password input area show black dots ?? because i am running in google chrome ? ive gone over my code and compared it with yours

  16. JadendayZero
    July 29, 2017 at 18:42

    How about if its more than one field? Do we type out all the variables inside the if else statement? Isn't their an easier way instead of typing 10+ var inside the if else statement?

  17. Geoffrey Currie
    July 29, 2017 at 18:42

    when i click login, with blank fields, nothing happens!

  18. Drake Coldman
    July 29, 2017 at 18:42

    Why if we replace (username == "") || (password == '") to (username = null) || (password == null)
    It does not work

  19. juned shaikh
    July 29, 2017 at 18:42

    how can we use normal empty message instead of alertbox?

  20. Abdul Kareem
    July 29, 2017 at 18:42

    I have one doubt that is how to display the user name in the action = "submission.html" page and iam searching for this for long time

  21. Alex Smedoiu
    July 29, 2017 at 18:42

    i work in adobe dreamweaver…but at "else" it give me an error ..why?if u can help me…

    function check_info(){
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;

    if(username=="" || password=="");{
    alert('please fill in all fields');
    return false;}
    else {
    return true;}
    }

  22. Art MK
    July 29, 2017 at 18:42

    Hey Quentin! I have a question. For inputs such as username and password why do we even need a name parameter? I mean how do we use it later on?

  23. pragati agrawal
    July 29, 2017 at 18:42

    <html>
    <head>
    <meta charset="utf-8"/>
    <title>form</title>
    <script type="text/javascript">
    function new(){
    var username=document.getElementById('username').value;
    var password=document.getElementById('password').value;

    if(username==""||password=="")
    {alert('pls fill the details');
    return false;
    }
    else{
    return true;
    }
    }
    </script>
    <body>
    <form action="second.html" method="get" onsubmit="return new();" >
    username:<input type="text" name="username" id="username"/><br/>
    password:<input type="password" name="password" id="password"/><br/>
    <input type="button" value="login"/>
    </form>
    </body>
    </html>

    whats the problem in this code quinton???
    <html>
    <head>
    <meta charset="utf-8"/>
    </head>
    <script type="text/javascript">
    </script>
    </head>
    <body>
    <h1>Thanks for Submission</h1>
    </body>
    </html>

    its not run..

  24. Angga Risky
    July 29, 2017 at 18:42

    u don't need database or server-side, just make a sample variable for each input. var username = "quentin" and u can make a validation username === usernameFromInput

  25. Senyorita Ayuna
    July 29, 2017 at 18:42

    awesom thank u man i preciate it …. i was confuse with it but now i can make it thank u man may alah blase u love u

  26. sourav podder
    July 29, 2017 at 18:42

    Awesome

  27. avinash kolachalam
    July 29, 2017 at 18:42

    Very nice tutorials sir your explanation is very good keep posting sir 🙂

  28. Akshansh Shrivastava
    July 29, 2017 at 18:42

    but what if user submitted incorrect data ?

  29. Shamsun Nahar
    July 29, 2017 at 18:42

    Many thanks.

  30. Tasheka Rhoden
    July 29, 2017 at 18:42

    Your tutorials are so helpful, I used them to study for my final Exam you make them so easy to understand.#ContinueTheGoodWork

  31. Jared Armes
    July 29, 2017 at 18:42

    I don't suppose that you have released a video that teaches how to validate based on the amount of characters in a text box? I do appreciate these tutorials! Thank you very much.

  32. fekede weyessa
    July 29, 2017 at 18:42

    it is good! do for another

  33. Tomer Iserovitch
    July 29, 2017 at 18:42

    thank you, I was looking to learn this all week… and finally understood where my mistakes were….
    What would I need to change to validate a fieldset?

Leave A Comment

You must be logged in to post a comment.