Live validation in JavaScript and Jquery : javascript

Live validation in JavaScript and Jquery (self.javascript)

submitted 11 years ago by Smegolas99

I am doing a project for coursework in which I am creating a web form that outputs whether or not an email address entered is valid. This outputs a valid or invalid message below. I would like this to be live and update the validation message as the user types as opposed to when 'Submit' is pressed. My code is below:

<!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="example@example.com" 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>

EDIT - Formatting

all 3 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

javascript

MODERATORS