0

I am trying to validate my html file using jquery.validate.js. I need to verify the length of mobileno field which should be of 10 characters. Here is my code:

<!-- mobile number goes here. -->
                <div class="form-group">
                    <label for="mobileno" class="col-sm-2 control-label">Mobile No.</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" id="mobileno" name="mobileno" placeholder="Mobile No (10 digits)" required autofocus>
                    </div>
                    <span id="mobileno_error"></span>
                </div> 

The js file corresponding to it is:

 $("#register_form").validate({
        // Specify the validation rules
        rules: {
            name: "required",
            email: {
                required: true,
                email: true
            },
            mobileno: {
                required: true,
                exactlength: 10
            },
            password: {
              required: true,
              minlength: 6
          },
          confirm_password:{
            required: true,
            equalTo: '#password'
        }
    },

        // Specify the validation error messages
        messages: {
            name:"Please enter your name.",
            email: {
                required: 'Email address is required',
                email: 'Please enter a valid email address',
            },
            mobileno: {
                required: 'Mobile number is required',
                exactlength: 'The mobile number should be of 10 characters.',
            },
            password: {
                required: 'Password is required',
                minlength: 'The password should be of minimum 6 characters.',
            },
            confirm_password: {
                required: 'Confirm password is required',
                equalTo: 'The confirm password should match password.',
            }

        },

While leaving the mobileno field I am getting issue like:

jquery.validate.js:4 Uncaught TypeError: Cannot read property 'call' of undefined. Exception occurred when checking element mobileno, check the 'exactlength' method.

I don't know what am I doing wrong.

Sparky
  • 98,165
  • 25
  • 199
  • 285
learner
  • 4,614
  • 7
  • 54
  • 98

2 Answers2

3

"I don't know what am I doing wrong?"

The error is telling you exactly what you're doing wrong...

Cannot read property 'call' of undefined ... check the 'exactlength' method.

There is no such jQuery Validate rule called exactlength. You cannot just make up new rules by writing its word within the rules object.

To force a field to be exactly X characters in length, you'd use the minlength and maxlength rules together and set them both to X.

mobileno: {
    required: true,
    minlength: 10,
    maxlength: 10
},

DEMO: http://jsfiddle.net/jmhjwf70/

Otherwise, there is a phoneUS rule within the additional-methods.js file you can use to validate any US phone number. Also see mobileUK, phoneUK, phonesUK, and phoneNL for additional phone number rules.

If that's not satisfactory, then you could write your own rule using the .addMethod() method.

Sparky
  • 98,165
  • 25
  • 199
  • 285
  • thank you very much for the help. can you guide me towards the implementation of the `addMethod()`? – learner Jun 29 '16 at 15:47
  • @learner, you will have to try it and post a new question if you have any troubles. However, you should see [this answer](http://stackoverflow.com/q/241145/594235) before doing that or it might get closed as a duplicate. – Sparky Jun 29 '16 at 15:50
  • @learner, another tip: open the `additional-methods.js` file and examine how those rules are constructed. They all use the `.addMethod()` method, so you can simply copy one and tweak it. – Sparky Jun 29 '16 at 15:51
  • so basically additional-methods.js file is nothing but an extension to the existing validation file? – learner Jun 29 '16 at 15:52
  • @learner, it's just a collection of more rules... you can include the whole thing, or just copy out what you need. There are five phone number rules in there; surely one will get you close. – Sparky Jun 29 '16 at 15:54
1
rangelength: [10, 10]

This is the function for field to be exactly X characters in length. You have to add additional-method.js otherwise it doesn't support

Kamiyabali
  • 11
  • 3