CODEWITHSUNDEEP
javascriptjqueryjquery-validate
Vivek Budithi
Vivek Budithi

Reputation: 622

Getting error when trying to do the customized message in jQuery validate

I have been trying many times with JQuery for validating errors using customized messages, but I am still confused that where I am making the mistake.I have tried with the normal validating messages, but when I tried with the customized, it shows me an error.

Below is the sample code which i have tried so far and unsucessful in executing it.

<form id="myform">
  <tr>
    <td class="alpha">username</td>
    <td>
      <input type="username" type="text" value="">
    </td>
  </tr>
  <br/>
  <tr>
    <td class="alpha">postcode</td>
    <td>
      <input type="postcode" type="text" value="">
    </td>
  </tr>
  <input type="submit" />
</form>

$.validator.setDefaults({
  submitHandler: function() {
    alert("submitted!");
  }
});

$document.ready(function() {
  $("#myform").validate({
    rules: {
      password: "required",
      postcode: {
        required: true,
        minlength: 3
      }
    },
    messages: {
      username: {
        required: "*Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
      },
      postcode: {
        required: "Field PostCode is required",
        minlength: "Field PostCode must contain at least 3 characters"
      }
    }
  });
});

Upvotes: 0

Views: 46

Answers (1)

Sparky
Sparky

Reputation: 98738

As written, your code would not work with the default messages either.

Please read my comments in the code...

rules: {
    password: "required",  // <- input with name="password" (where is "password"?)
    postcode: {            // <- input with name="postcode"
        required: true,
        minlength: 3
    }
},
messages: {
    username: {     // <- input with name="username"
        required: "*Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
    },
    postcode: {     // <- input with name="postcode"
        required: "Field PostCode is required",
        minlength: "Field PostCode must contain at least 3 characters"
    }
}

  1. The rules and messages objects' parameters are keyed by the name attribute of the input element. Your input elements do not contain any name attributes. The plugin mandates that all form inputs contain a unique name, and the plugin will not work without these.

  2. You have invalid values for the type attribute. There are no such things as type="username" and type="postcode"; and you erroneously have more than one type attributes on each input, <input type="username" type="text" value="">

  3. In your case, you don't even attempt to define any rules for a username field. You only have password and postcode within the rules object.

Fix your invalid HTML markup and JavaScript...

  • Remove all extraneous type attributes from each input.
  • Add a unique name attribute to each input.
  • Only reference your name attributes within rules and messages objects.

DEMO: jsfiddle.net/2tx6u7wf/

Upvotes: 1

Related Questions