How to Disable button until required fields are filled without using javascript, just HTML5 and CSS
<p>I have the following form</p>

<pre><code>&lt;form action="" method="post"&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Booking Details&lt;/legend&gt;
        &lt;div&gt;
            &lt;label for="name"&gt;Name:&lt;/label&gt;
            &lt;input id="name" name="name" value="" required  pattern="[A-Za-z-0-9]+\s[A-Za-z-'0-9]+" title="firstname lastname" aria-required="true" aria-describedby="name-format"&gt;
            &lt;span id="name-format" class="help"&gt;Format: firstname lastname&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="email"&gt;Email:&lt;/label&gt;
            &lt;input type="email" id="email" name="email" value="" required aria-required="true"&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="website"&gt;Website:&lt;/label&gt;
            &lt;input type="url" id="website" name="website" value=""&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;label for="numTickets"&gt;&lt;abbr title="Number"&gt;No.&lt;/abbr&gt; of Tickets:&lt;/label&gt;
            &lt;input type="number" id="numTickets" name="numTickets" value="" required aria-required="true" min="1" max="4"&gt;
        &lt;/div&gt;
        &lt;div class="submit"&gt;
            &lt;input type="submit" value="Submit" onclick="alert('martharfarkar')"&gt;
        &lt;/div&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;
</code></pre>

<p><a href="https://jsfiddle.net/ianoxley/VY8KU/" rel="nofollow">JS Fiddle FROM EXAMPLE</a></p>

<p>I want to send an email using a webservice on the onclick event of a button, but noticed that the event is triggered regardless the form validation,  so the question is, is there a way to trigger the onclick event only if the form is valid without using javascript?  perhaps HTML5 has something new to offer</p>