I've tried below code but can't get error messages.
var v = jQuery("#account_info").validate({
//errorLabelContainer: $("#result"),
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#checkOut_error",
success: function(msg) {
//setTimeout("window.location='MyBids.php'", 2000);
if(msg == '<?php echo OBJECT_STATUS_SUCCESS;?>') {
$('#checkOut_error').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
//setTimeout("window.location='"+<?php echo LINK_TO_TENBID;?>+"'", 2000);
//setTimeout("window.location.reload(true)",2000);
//$('.result').html('<div class="msg msg-thanks">Bid Submitted Successfully !</div>');
} else{
$("#checkOut_error").html(msg);
}
},
clearForm: false,
resetForm: false
});
},
errorLabelContainer: "#checkOut_error",
rules: {
phone_number: {
required: true
},
recipient_name: {
required: true,
min_length: 6
}
},
messages: {
recipient_name: {
required: "Enter recipient name",
min_length: "Name should be atleast 6 characters long"
}
}
});
-How to add rules and error messages?
-Which attribute does validation plugin uses: name or id?
-How to show one error message at a time?
-Which attribute does validation plugin uses: name or id?
As per documentation, the plugin requires that all input
fields contain a name
attribute
. When specifying the rules
and messages
inside .validate()
, you would use the name
attribute
.
-How to add rules and error messages?
The min_length
rule should not contain an underscore. It's minlength
. Otherwise, your code looked correct.
Simple demo based on your code...
jQuery:
$(document).ready(function () {
$("#account_info").validate({
rules: {
phone_number: {
required: true
},
recipient_name: {
required: true,
minlength: 6 // <-- removed underscore
}
},
messages: {
phone_number: {
required: "this field is required"
},
recipient_name: {
required: "Enter recipient name",
minlength: "Name should be at least {0} characters long" // <-- removed underscore
}
},
submitHandler: function (form) { // for demo
alert('valid form'); // for demo
return false; // for demo
}
});
});
HTML:
<form id="account_info">
<input type="text" name="phone_number" />
<br/>
<input type="text" name="recipient_name" />
<br/>
<input type="submit" />
</form>
Working jsFiddle Demo: http://jsfiddle.net/rfgRL/
Also, when using a rule like minlength
, your custom message can contain a placeholder, {0}
, that inserts your specific rule definition.
minlength: 6
with a custom message...
minlength: "Name should be at least {0} characters long"
will automatically display...
Name should be at least 6 characters long
Since you only call .validate()
once on DOM ready to only initialize the validation plugin with its options, there is no purpose in assigning it to a variable; it's not being re-used anywhere... at least it shouldn't be.
var v = jQuery("#account_info").validate({...});
Would simply be this...
jQuery("#account_info").validate({...});
Elsewhere in your code, if you needed to test the form
for validity or re-trigger a validity test, use the .valid()
method. It will both return a boolean and trigger display of any pending form errors. Example:
if (jQuery("#account_info").valid()) { ...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With