I have the following code example that works in browsers that check when they see the HTML5 "required" on an input like the email here:

<form id='myForm'>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
</form>​

Here is a fiddle for the above.

However in my application I use a button outside of my form and the following code attached to the click event of that button:

if (!$form.valid || $form.valid()) {
    $submitBt
        .disableBt();
    $modal
        .removeBlockMessages()
        .blockMessage('Contacting Server, please wait ... ', {
            type: 'loading'
        });
    $.ajax({
        url: href,
        dataType: 'json',
        type: 'POST',
        data: $form.serializeArray()
    })
        .done(onDone)
        .fail(onFail);
}

I have two questions here:

  • What does the following code do: (!$form.valid || $form.valid())
  • How can I check my form validity using the new HTML5 checks?
Edit
Report