CODEWITHSUNDEEP
javascripthtml
Dan Bowers
Dan Bowers

Reputation: 13

Live validation instead of on button click validation

I would like to be able to use live page validation instead of the VALID or INVALID message showing after pressing submit, my code validates an email address and when the submit is clicked the input displays below followed by valid or invalid, if valid it will be in green and if invalid it is in red. Here is my code:

<!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: 0

Views: 369

Answers (5)

Andre
Andre

Reputation: 241

You can also solve that issue inside your javascript code:

$("#email").on('input', function() {
  // do your validation here
});

The function then automatically called each time you enter or remove a character in the input field. If you only need to validate after the user pressed RETURN or the focus is no longer on the input field, use:

$("#email").on('change', function() {
  // do your validation here
});

Upvotes: 0

BananaAcid
BananaAcid

Reputation: 3491

I think, you this is way is cleaner - use as inspiration:

function validateEmailField() ...

function validateAllFields() {
  return validateEmailField() && validateUsernameField();
}

// make sure submit on enter key or alike is triggering validate
// you might use a 'validateAll' function here
$('form').on('submit', validateAllFields);

// validate field on leaving it
$('form').on('blur', '#email', validateEmailField);

While at it: You may also use HTML5-WebForms (with Polyfill for old browsers) to use a really simple form validation technique. Have a look at at this page (validation is further down) ... Form Validation

Upvotes: 0

Kirka121
Kirka121

Reputation: 505

bind the validate event to the text-box's focus out.

example:

$("#email").focusout(function () {

validate();

});

this way it will run through the regex right after you un-selected the email textbox, aka when you filled it in, instead of when you submit the form.

Upvotes: 0

Neeraj
Neeraj

Reputation: 4489

Hi you can use Jquery validate plugin

$(function() {

// Setup form validation on the #register-form element
$("#register-form").validate({

// Specify the validation rules
rules: {
    firstname: "required",
    lastname: "required",
    email: {
        required: true,
        email: true
    },
    password: {
        required: true,
        minlength: 5
    },
    agree: "required"
},

// Specify the validation error messages
messages: {
    firstname: "Please enter your first name",
    lastname: "Please enter your last name",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    email: "Please enter a valid email address",
    agree: "Please accept our policy"
},

submitHandler: function(form) {
    form.submit();
}
});

});

Demo

Upvotes: 1

brso05
brso05

Reputation: 13232

You can use the onChange() event of your email input to call your validate() method instead of your submit button or you can call on both events...

Example:

<input id='email' placeholder="[email protected]" size="21" onchange="validate()">

Upvotes: 1

Related Questions