JavaScript beginner tutorial 30 – form validation text boxes and passwords




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


33 responses to “JavaScript beginner tutorial 30 – form validation text boxes and passwords”

  1. 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>

  2. 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.

  3. 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?

  4. <!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>

  5. 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;}
    }

  6. <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..

Leave a Reply