Unable to specify custom error in jQuery validation engine
I am fiddling with the jQuery validation engine documented here
I have downloaded all JS files locally. And created a simple form with single required textbox field.
Problem 1
I am unable to specify custom error for this required rule (even though I have specified custom-error-message option). Instead it shows the default message "This field is required." I have written this code with the help of example (shown here) on the git, but it is not working. Please point out where it is going wrong. (I want to do it with JS object literals instead of using 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 what rule to apply to which element in JS instead of specifying class values in html. I will prefer to have clean unobtrusive html instead of mixing validation specific stuff in html. This is possible with 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 the jQuery Validation engine.
Answer
yes it is possible : link
exemple :
<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: [email protected]"
data-errormessage="This is the fall-back error message."/>
Also please note that since JQuery 1.9 many functions that worked in past version are now removed or deprecated and a fix was added tree days ago, so you might want to download the latest version : jQuery.validationEngine v2.6.1
edit don' t know if they corrected it yet but in the .js file replace
line28 : .live(...
by
line 28 : .on(...
live has been removed since jQuery 1.9
edit:
you did a small mistake :
<input id="**#**username" type="text" class="validate[required]" ></input> <br />
the # should be there :
<input id="username" type="text" class="validate[required]" ></input> <br/>