Validate plugin - Ignore 'default' data-placeholder value

Validate plugin - Ignore 'default' data-placeholder value

Hi all, 

I have inputs using the data-placeholder attribute as placeholder text on form fields and removing it when the field is clicked (basically mimicing the behaviour of the actual placeholder attribute).

Problem is, the validate plugin (correctly) considers these fields populated so doesn't error when they haven't been populated by the user.

I see that there are custom rules you can set up and I think I could somehow check if the text is the default text or not and validate based on that using  jQuery.validator.addMethod.

So if the name field has 'Name' in the data-placeholder then still validate and the same for the others.

Could someone help me write these rules, I'm not sure where to start (still learning).

I would usually just use a placeholder polyfill but this is an existing set-up that I need to cater for.

  1. <form action="#" id="form_id" class="form">
  2.   <ol class="box_form">
  3.     <li class="form_item">
  4.       <label for="name" class="visuallyhidden">Name</label>
  5.       <input id="name" type="text" data-placeholder="Name" class="required">
  6.     </li>
  7.     <li class="form_item">
  8.       <label for="email" class="visuallyhidden">Email</label>
  9.       <input type="text" name="email" value="" id="email" data-placeholder="Email" class="required email">
  10.     </li>
  11.     <li class="form_item">
  12.       <label for="phone" class="visuallyhidden">Phone</label>
  13.       <input id="phone" type="text" data-placeholder="Phone">
  14.     </li>
  15.     <li class="form_item">
  16.       <label for="email" class="visuallyhidden">I am interested in&hellip;</label>
  17.       <input type="text" name="email" value="" id="email" data-placeholder="I am interested in&hellip;" class="required">
  18.     </li>
  19.     <li>
  20.       <label for="message" class="visuallyhidden">Message</label>
  21.       <textarea name="Message" rows="4" cols="40" data-placeholder="Message"></textarea>
  22.     </li>
  23.     <li class="align_right">
  24.       <button class="btn submit" type="submit">Submit</button>
  25.     </li>
  26.   </ol>
  27. </form>
Many thanks!