Question

When I attempt to create a method to use the methods provided in the additional-methods.js file I get the intended validation. However, if the user inputs a wrong value, instead of displaying the exception defined in the additional-methods.js file, the user sees the title of the current element, which is currently being used for type-hinting.

My JavaScript looks like this:

  //setup input validation
                validator = form.validate({
                    rules: {
                        city: {
                            required: true,
                            lettersonly: true
                        }
                    }
                }); 

  $('input, textarea').blur(function(){
                    element = $(this);

                    // if the user gave no value then show the this field is required
                    if(element.val() == element.attr('title')){ 
                        refreshError(element, 'This field is required');
                    }else if(element.val() == '') {  //if the value is empty then check if it was required, also check if it had an input hint
                        //if the element is required display the error message
                        if(element.hasClass('required')){ 
                            refreshError(element, 'This field is required');
                        }

                        //if the title exists then we assume it is the input hint
                        if(element.attr('title') != ''){
                            element.val(element.attr('title'));
                            element.addClass('inputHint');
                        }
                    }else{
                        //if we got input validate it
                        response = element.valid();
                        //if we got an error clear the old one(conditional on existance), and display the new one. Otherwise clear any old error
                        if(!response){
                            this.defaultShowErrors();
                        }else{
                            errorId = element.attr('id')+'Error';
                            $('#'+errorId).remove();
                        }
                    }
                });

With the relevant part of the form being:

<label for="city">City:</label>
<input type="text" name="city" id="city" class="required inputHint" title="Your city here" />

Any ideas as to what I am doing wrong? I am using the 1.9.0 version of the jQuery Validator plugin

NB: I thought I had hit the nail on the head after reading: addMethod() of jQuery validation plugin display error from title attribute but after trying:

                    //setup input validation
                validator = form.validate({
                    rules: {
                        city: {
                            required: true,
                            lettersonly: true
                        }
                    },
                    messages: {
                        city: {
                            lettersonly: "you must give a valid city"
                        }
                    }
                }); 

I found that nothing changed.

Answer 1

I just ran into this error and came across the ignoreTitle option:

//setup input validation
validator = form.validate({
    ignoreTitle: true,
    rules: {
        city: {
            required: true,
            lettersonly: true
        }
    },
    messages: {
        city: {
            lettersonly: "you must give a valid city"
        }
    }
});