0

I am trying to detach if input text box is changed (user has stopped typing) using javascript so that I can validate the form and show the error message if required. I know it can be done using jQuery but I wish to do it in pure javascript.

http://jsfiddle.net/xstqLkz4/2/

The above link demonstrate it using jQuery

I don't have much code. I am not sure from where to start.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript validate</title>
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
    <script src="domready.js"></script>
    <script>
    DomReady.ready(function() {
        (function () {
            var Username = document.getElementById("Username");
            var Password = document.getElementById("Password");
            var DOB = document.getElementById("DOB");
            var Email = document.getElementById("Email");
            var Country = document.getElementById("Country");

            if (Username.length <= 5){
                alert("Less then 5");
            }

        })();
    });
    </script>
    <style>
        body{
            font-family: 'Lato', sans-serif;
            position: absolute;
        }

        label{
            font-size: 1.2em;
            margin-right: 5px;
        }

        input[type='text'], input[type='password']{
            border: none;
            padding: 7px;
            background-color: rgba(242, 240, 240, 1);
            font-family: 'Lato', sans-serif;
            font-size: 0.85em;
            font-weight: 100;
        }

        input[type='password'], input[type='text'], input[type='submit']{
            margin-top: 18px;
        }

        input[type='password']{
            margin-left: 32px;
        }

        input[type='submit']{
            padding: 10px 119px;
            background-color: #F2F0F0;
            border: medium none;
            font-family: "Lato",sans-serif;
            margin-top: 24px;
            font-size: 1.4em;
            font-weight: 500;
        }

        #wrp{
            width: 800px;
            position: relative;
            left: 438px;
            top: 32px;
        }

        #Username{
            margin-left: 25px;
        }

        #DOB{
            margin-left: 3px;
        }

        #Email{
            margin-left: 70px;
        }

        #Country{
            margin-left: 43px;
        }

        .errortxt{
            color: rgba(206, 145, 145, 1);
        }

        .error{
            background-color: rgba(242, 228, 228, 1);
        }

    </style>
</head>
<body>
    <div id="wrp">
        <form action="">
            <div>
                <label for="Username">Username</label>
                <input type="text" id="Username">
            </div>
            <div>
                <label for="Password">Password</label>
                <input type="password" id="Password">
            </div>
            <div>
                <label for="DOB">Date of birth</label>
                <input type="text" id="DOB">
            </div>
            <div>
                <label for="Gender">Gender</label>
                <div>
                    <label for="Male">Male</label>
                    <input type="radio">

                    <label for="Female">Female</label>
                    <input type="radio">
                </div>
            </div>
            <div>
                <label for="Email">Email</label>
                <input type="text" id="Email">
            </div>
            <div>
                <label for="Country">Country</label>
                <input type="text" id="Country">
            </div>
            <div>
                <input type="submit" value="Submit">
            </div>
        </form>
    </div>
</body>
</html>
Himanshu
  • 37
  • 5

1 Answers1

1

The jsFiddle seems pretty straight forward (although, the timing might be a bit short).

This code ...

$("#input").on("input" ...

... seems to indicate that it is being run on a single <input> tag. You might want to shift this to a class and perform the validation where the alert() fires.

rfornal
  • 5,072
  • 5
  • 30
  • 42