I'm sure I'm just overlooking something simple...but I want to display a text error message next to the invalid input item (such as a text box) in the jQuery-steps form validation. Code base on Jquery-steps, here.
From what I've been reading this should do the trick:
<script>
$(function ()
{
/* function errorPlacement(error, element)
{
element.before(error);
}*/
$("#form").validate({
rules: {
zip: {
required: true,
digits:true,
maxlength:5,
minlength:5
},
messages: {
zip: "entr da zip dode"
}
}
});
$("#wizard").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
// Allways allow step back to the previous step even if the current step is not valid!
if (currentIndex > newIndex)
{
return true;
}
$("#form").validate().settings.ignore = ":disabled,:hidden";
return $("#form").valid();
},
onFinishing: function (event, currentIndex)
{
$("#form").validate().settings.ignore = ":disabled";
return $("#form").valid();
},
onFinished: function (event, currentIndex)
{
alert("Thank you! Your request has been sumbitted.");
}
});
});
//PHONE NUMBER MASKING FUNCTION
jQuery(function($){
$("#phone").mask("999-999-9999",{placeholder:" "});
});
But the validation simply ignores this and just adds 'class="error"' to the invalid items, but not appending a label or div (etc) to display the messages.
What did I miss?
Set up your rules and your messages as two separate objects. Try this instead (you can uncomment the min/max messages to see how they work):
$('#form').validate({
rules: {
zip: {
required: true,
digits: true,
minlength: 5,
maxlength: 5
}
},
messages: {
zip: {
//minlength: jQuery.format("Zip must be {0} digits in length"),
//maxlength: jQuery.format("Please use a {0} digit zip code"),
required: "entr da zip dode"
}
}
});