user2224798 user2224798 - 5 months ago 19
Javascript Question

Jquery Validate Plugin Keydown

Using the Jquery Validate plugin, is there a way of validating as soon as the first key is pressed and showing the error messages until they have entered what is required?

So the first keypress in an input field I want the validation message to appear, until they have correctly inputted what is required

My code is below

<?php
// Error Config
include_once("PHP/Config.php");
// Session
include_once("PHP/Session.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>TBA </title>

<meta name="description" content="Coming soon
<meta name="keywords" content="

" />
<link rel="icon" type="image/ico" href="favicon.ico"/>

<link href="CSS/Site_Style.css" rel="stylesheet" type="text/css" />
<link href="CSS/Register_Form.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JS/jquery.validate.js"></script>
<script type="text/javascript" src="JS/additional-methods.min.js"></script>

<script>
$(document).ready(function () {

$("#SignUp").validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
password: true
},
confirm_password: {
required: true,
password: true,
notEqual: "#password"
},
company: {
nls: true,
required: true
},
telephone: {
phone: true
}
}
});

$.validator.addMethod("email", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address");

$.validator.addMethod("password", function (value, element) {
return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
}, "Passwords are 6-16 characters");

jQuery.validator.addMethod("notEqual", function (value, element, param) {
return this.optional(element) || value == param;
}, "Passwords Do Not Match");

$.validator.addMethod("nls", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9\s.\-_']+$/i.test(value);
}, "Please Only Enter Alpha Numeric Characters");

$.validator.addMethod("phone", function (value, element) {
return this.optional(element) || /(\s*\(?0\d{4}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)/i.test(value);
}, "Please Only Enter UK Telephone Numbers");

});
</script>




</head>

<body>
<div id="Site_Holder">

<div id="Header_Holder">
<?php include_once "PHP/Inserts/Header_Content.php";?>
</div><!-- Header Holder End -->

<div id="Navigation_Holder">

<?php include_once "PHP/Inserts/Navigation_Content.php";?>


</div><!-- Navigation Holder End -->

<div id="Content_Holder">

<div id="Register_Form_Holder" class="General_text">

<div class="Blank_Divider">Register a Climbing Centre<br/>
<br/></div>

<div class="Blank_Divider"></div>
<form id="SignUp">



<div class="Name_Form_Field">E-mail Address:</div>
<div class="Input_Form_Field"><input id="email" name="email"/></div>

<div class="Blank_Divider"></div>

<div class="Name_Form_Field">Password:</div>
<div class="Input_Form_Field"><input id="password" name="password" type="password" /></div>

<div class="Blank_Divider"></div>

<div class="Name_Form_Field">Confirm Password:</div>
<div class="Input_Form_Field"><input id="confirm_password" name="confirm_password" type="password" /></div>

<div class="Blank_Divider"></div>


<div class="Blank_Divider">Header
<br/>
<br/></div>

<div class="Name_Form_Field"> Name:</div>
<div class="Input_Form_Field"><input id="company" name="company" type="text" /></div>

<div class="Blank_Divider"></div>

<div class="Name_Form_Field">Contact Telephone Number:</div>
<div class="Input_Form_Field"><input id="telephone" name="telephone" type="text" /></div>



</form>



</div>


</div><!-- Content Holder End -->

<div id="Footer_Holder">

<?php include_once "PHP/Inserts/Footer_Content.php";?>

</div><!-- Footer Holder End -->


</div><!-- Site Holder End -->
</body>


</html>

Answer

Quote OP:

"Using the Jquery Validate plugin, is there a way of validating as soon as the first key is pressed and showing the error messages until they have entered what is required? So the first keypress in an input field I want the validation message to appear, until they have correctly inputted what is required."

That is already the default behavior of the plugin. (The onkeyup option is enabled by default.)

See this simple demo, where as soon as you enter one character into the first field (with the email rule), the message immediately tells you to enter a valid email address. As soon as you enter one character into the second field, the minlength rule tells you to enter at least 10 characters. And if you start filling out a field and then delete it, the message for the required rule will appear. Messages will appear in the order that their rules are declared (with the exception of the required rule).

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 10,
                alphanumeric: true
            },
            field3: {
                digits: true,
                minlength: 3
            }
        }
    });

});

DEMO: http://jsfiddle.net/yyR9C/


EDIT:

Same jsFiddle but with code as posted in OP's edit:

Still working: http://jsfiddle.net/yyR9C/1/

Comments