Can't specify custom error in jQuery validator
I was messing around with jQuery's validation engine registered here
I have downloaded all JS files locally. And created a simple form with one required text field.
Problem 1
I am unable to specify a custom error for this required rule (even if I specified the custom-error-message option). Instead, the default message "This field is required" is displayed. I wrote this code using an example (shown here ) on git, but it doesn't work. Please indicate where this is happening. (I want to do this with JS object literals instead of using the equivalent html5 attributes.)
My code:
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="scripts/jquery.validationEngine.js"> </script>
<link type="text/css" rel="stylesheet" href="styles/validationEngine.jquery.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validationEngine({'custom_error_messages' : {
'#username':{
'required':{
'message':"Hey you cannot leave this field blank."
}
}
}
});
});
</script>
</head>
<body>
<form id="form1">
<br /><br />
<h2>Form 1</h2>
Username: <input id="#username" type="text" class="validate[required]" ></input> <br />
</form>
</body>
</html>
Problem 2
How can I specify which rule to apply to which element in JS instead of specifying class values in html. I would rather have clean unobtrusive html instead of mixing specific validation data in html. This is possible with the jQuery Validation plugin as follows:
$ ("# register-form"). validate ({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
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 ();
}
});
Is this possible with jQuery's validation engine.
source to share
yes possible: link
Example:
<input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]"
data-errormessage-value-missing="Email is required!"
data-errormessage-custom-error="Let me give you a hint: someone@nowhere.com"
data-errormessage="This is the fall-back error message."/>
Also note that since jQuery 1.9 many features that worked in the previous version are now removed or deprecated and the fix was added the tree back so you can download the latest version: jQuery.validationEngine v2.6.1
edit don't know if they fixed it but in .js file replaced
line28 : .live(...
line 28 : .on(...
live removed as of jQuery 1.9
change
you made a small mistake:
<input id="**#**username" type="text" class="validate[required]" ></input> <br />
should be # :
<input id="username" type="text" class="validate[required]" ></input> <br/>
source to share