How to remove HTML5 title attribute after validation

Question

I am using html 5 for mobile development in Icenium.

I want to do validation so I used required attribute along with title attribute to show messages to user.

But once I do enter correct input into the specified fields that title messages should get remove; as it won't be appropriate to show messages to user once they enter appropriate values.

I want to remove titles form fields after validation, is there any way for this?

<li>
    <label>First Name:
        <input type="text" data-bind="value: firstName" required title="Please Enter your First Name">
    </label>
</li>
<li>
    <label>Last Name:
        <input type="text" data-bind="value: lastName" required title="Please Enter your Last Name">
    </label>
</li>
<li>
    <label>Email:
        <input type="email" required title="please enter your email" data-bind="value: emailAddress" autocomplete="off">
    </label>
</li>

Answer 1

Try this:

<li>
    <label>First Name:
        <input class="txtCheck" type="text" data-bind="value: firstName" required title="Please Enter your First Name">
    </label>
</li>


$('.txtCheck').on('blur keyup', function(){
      if($(this).val() == "yourvalue"){
         $(this).removeAttr('title');
      }
});

Answer 2

If you want to rely on HTML5 functionality, then I’d suggest making use of the constraint validation API.

element.willValidate, element.validity.valid or element.checkValidity() are what you could query upon the blur event (or change, keyup, whatever) to see if a certain element is currently in valid state or not.