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.
- <form action="#" id="form_id" class="form">
- <ol class="box_form">
- <li class="form_item">
- <label for="name" class="visuallyhidden">Name</label>
- <input id="name" type="text" data-placeholder="Name" class="required">
- </li>
- <li class="form_item">
- <label for="email" class="visuallyhidden">Email</label>
- <input type="text" name="email" value="" id="email" data-placeholder="Email" class="required email">
- </li>
- <li class="form_item">
- <label for="phone" class="visuallyhidden">Phone</label>
- <input id="phone" type="text" data-placeholder="Phone">
- </li>
- <li class="form_item">
- <label for="email" class="visuallyhidden">I am interested in…</label>
- <input type="text" name="email" value="" id="email" data-placeholder="I am interested in…" class="required">
- </li>
- <li>
- <label for="message" class="visuallyhidden">Message</label>
- <textarea name="Message" rows="4" cols="40" data-placeholder="Message"></textarea>
- </li>
- <li class="align_right">
- <button class="btn submit" type="submit">Submit</button>
- </li>
- </ol>
- </form>
Many thanks!