HTML5 attribute alternate syntax for mobile site compatible with jQuery

I'm developing a mobile site using JQM (jQueryMobile) and HTML5 and I wanted to know (going forward with HTML5) what is the correct syntax?

What I'm currently doing

<input type="text" name="phone" id="phone" class="required" placeholder="Phone Number*" />

HTML5 version (no double quotes needed)

<input type=tel name=phone id=phone required placeholder="Phone Number*" /&开发者_Go百科gt;

My issue is if I use jQuery for the form validation I need to add the class="required", but if I use HTML5 form validation I can just add the required attribute. I thought I could use in HTML5 and keep the current syntax required="required" to enable required and required="" to disable required, but that's not the case. if the word required is in the element tag HTML5 requires it.

If I switch to HTML5 syntax are there any issues in using jQuery/JQM functionality? (As the HTML5 validation is noce but I would still like to use jQuery as a "Just in case" backup)

NOTE: I'm also using server side validation as well

---

If you care about progressive enhancement, try to stick with syntax looking like html4.1. It will be handled well by older browsers and feature-phones.

jQuery Mobile does its magic even if your html is not html5

---

I would recommend relying on the jQuery validation, and progressively enhancing with HTML5 validation when possible. Detect when HTML5 validation is available through Modernizr, or with the following snippet (borrowed from Mark Pilgram's diveintohtml5.ep.io):

function can_html5_validate() {
    return 'noValidate' in document.createElement('form');
}

If it is available, use the HTML5 validation, otherwise, fall back to jQuery. I used this method and did not notice any conflicts with jQuery's validation plug-in.