CODEWITHSUNDEEP
jqueryjquery-validate
Matt
Matt

Reputation: 1616

JQuery Validation not picking up custom messages

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

Answers (1)

Sparky
Sparky

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

Related Questions