CODEWITHSUNDEEP
javascripthtml
Dan Bowers
Dan Bowers

Reputation: 31

Javascript live validation

I have a very simple HTML/JavaScript form that I am working on for coursework, I have got it to work however i would like it to validate the input as the user types (my validation appears below the text field) how can I achieve this? My code is as follows:

<!DOCTYPE html>
<html>
<head>
    <script class="jsbin" src="http:ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">  </script>
    <meta charset=utf-8 />
    <title>Email Validation</title>
</head>
<body>
    <form onsubmit='validate(); return false;'>
        <p>Enter an email address:</p>
        <input id='email' placeholder="[email protected]" size="21">
        <button type='submit' id='validate'>Submit</button>
    </form>
    <br />
    <h2 id='result'></h2>
    <script>
        function validateEmail(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }
        function validate() {
            $("#result").text("");
            var email = $("#email").val();
            if (validateEmail(email)) {
                $("#result").text(email + " is valid");
                $("#result").css("color", "green");
            } else {
                $("#result").text(email + " is not valid");
                $("#result").css("color", "red");
            }
            return false;
        }
        $("form").bind("submit", validate);
    </script>
</body>
</html>

Upvotes: 2

Views: 4002

Answers (1)

cyram
cyram

Reputation: 840

For methods not using jQuery, in case you're interested, there's another Stack Overflow question here: On Input Change Event.

There are many ways to do what you want listed there, but in this case you could do something like this:

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    // Check input.value for what you're looking for here
});

See the jsFiddle that Drew Noakes' made in that other page for an example.

But, since you're using jQuery, then Nicholas Kyriakides's suggestion is the way to go.

Upvotes: 2

Related Questions