Reputation: 1616
I have the following function, but when the validation is triggered, it is displaying the stock "This field is required." message, not my custom message.
$('#customerEnquiry')
.validate({ // initialize the plugin
rules: {
"InputModel.FirstName":
{
required: true
},
"InputModel.Surname": {
required: true,
minlength: 3
},
messages: {
"InputModel.FirstName":
{
required: "Please Supply First Name (or initial)."
},
"InputModel.Surname": {
required: "Please Supply Surname.",
minlength: "Minimum length of 3."
}
}
}
});
There are no errors in the console, so I am at a loss as to why the messages are not being triggered. The only obvious thing I can see is that the error labels that are auto generated are not picking up the full name of the tested control. (As shown below)
<label class="error" for="Surname" generated="true">This field is required.</label>
Being as my html is generated automatically, and is data bound to my model, I have no control over the naming of the input controls.
So is there any way I can get round this, or do I need to go back to fighting with Microsofts unobtrusive validation, which gives me the correct labels, but doesn't let me do other things I wish to achieve.
Below is a snip of the relevant HTML
<div class="tab-pane active" id="basic-tab">
<div class="control-group">
<label class="control-label" for="InputModel_FirstName">Customer Forename (or Initial)</label>
<div class="controls">
<input name="InputModel.FirstName" class="noltmarg" id="FirstName" type="text" placeholder="Enter First name" value="" data-val-required="First Name is required" data-val="true">
</div>
</div>
<div class="control-group">
<label class="control-label" for="InputModel_Surname">Customer Surname</label>
<div class="controls">
<input name="InputModel.Surname" class="noltmarg" id="Surname" type="text" placeholder="Enter Surname" value="" data-val-required="Surname is required" data-val="true" data-val-length-min="2" data-val-length-max="30" data-val-length="At Least 2 Letters are Required">
</div>
</div>
... Rest of form omitted for Brevity
</fieldset>
</div>
Upvotes: 0
Views: 913
Reputation: 98758
You've misplaced a bracket effectively placing messages
inside the rules
object...
$('#customerEnquiry').validate({ // initialize the plugin
rules: {
"InputModel.FirstName": {
required: true
},
"InputModel.Surname": {
required: true,
minlength: 3
},
messages: {
"InputModel.FirstName": {
required: "Please Supply First Name (or initial)."
},
"InputModel.Surname": {
required: "Please Supply Surname.",
minlength: "Minimum length of 3."
}
}
}
});
Instead, messages
is supposed to be a sibling of rules
...
$('#customerEnquiry').validate({ // initialize the plugin
rules: {
//
},
messages: {
//
}
});
DEMO: jsfiddle.net/gLruabce/
Upvotes: 1