CODEWITHSUNDEEP
jqueryhtmljquery-validate
tim peterson
tim peterson

Reputation: 24305

jQuery Validate plugin ignoreTitle on single field?

I know you can ignore the title attributes as error messages for a form with the following code:

$("#myForm").validate({
  ignoreTitle:true
});

However, i'd like to know if this can be done for a single field. The reason I'm asking is because I'd like to have one of my fields return a message containing HTML and not just a string message.

Is there any way to conditionally put HTML within title attributes?

Upvotes: 0

Views: 482

Answers (2)

tim peterson
tim peterson

Reputation: 24305

I realized it might be simpler in my case just to remove the title attribute before validation and add it back if there is an error.

So here's the general idea of the Javascript I went with:

//BEFORE validation, remove title attribute:
var password=$('#myForm).find('input[type=password]');
var title=password.attr('title');
password.removeAttr('title');

//If there is an error, add back the title attribute 
password.attr('title', title);

And here's the HTML:

<input id="password" title='Password must be at least 8 characters, 1 number, 1 upper and 1 lower case letters'  placeholder='At least 8 chars, 1 num, 1 upper'
name="password" type="password" />
<div class='error'>
<ul id='passwordError' style='display:none'>
    <li>Password must be at least:</li>
    <li> 8 characters </li>
    <li> 1 upper, 1 lower case letter</li>
    <li> 1 number</li>  
</ul>               
</div>

Upvotes: 0

Sparky
Sparky

Reputation: 98728

Quote: Is there any way to conditionally put HTML within title attributes?

No, there is not. But you can designate custom messages within the messages option for that one field instead.

$(document).ready(function(){
    $('#myform').validate({
        //  your other rules and/or options
        messages: {
            myfieldname: {
                myrule: "this is my <b>custom</b> message"
            }
        }
    });
});

(Yes, it looks like HTML is allowed)

Working Demo: http://jsfiddle.net/4KGjD/

See documentation.

messages, Options, Default: the default message for the method used

Key/value pairs defining custom messages. Key is the name of an element, value the message to display for that element. Instead of a plain message another map with specific messages for each rule can be used. Overrides the title attribute of an element or the default message for the method (in that order). Each message can be a String or a Callback. The callback is called in the scope of the validator and with the rule's parameters as the first and the element as the second arugment, it must return a String to display as the message.

Upvotes: 1

Related Questions