CODEWITHSUNDEEP
javascriptjqueryhtmlvalidation
user1464139
user1464139

Reputation:

How can I check the validity of an HTML5 form that does not contain a submit button?

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:

Upvotes: 39

Views: 49623

Answers (2)

Jeff Bowman
Jeff Bowman

Reputation: 95614

Assuming that you have set the form element to an object called $form, then if (!$form.valid || $form.valid()) is clever syntax that means "if $form doesn't have a method called valid, or if valid() returns true". Typically you will have installed and initialized the jQuery Validation plugin by then, but this prevents the form from becoming disabled if the validation plugin is not loaded.

You can do a similar test using the HTML5 method checkValidity, looking something like this:

if (!$form.checkValidity || $form.checkValidity()) {
  /* submit the form */
}

EDIT: checkValidity is a function from the HTML5 forms spec. As of February 2016 CanIUse.com reports that over 95% of browsers support it.

Upvotes: 77

jokeyrhyme
jokeyrhyme

Reputation: 3638

In HTML5, you may use a "form" attribute on an element to explicitly associate it with a Form element regardless of where it is positioned in the page structure: http://developers.whatwg.org/association-of-controls-and-forms.html#attr-fae-form

In compliant browsers, you ought to be able to put your input[type=submit][form=id] element anywhere and still have it properly trigger the validation and submission process.

I tend to put code that is supposed to intercept the submission process in the form's "submit" event handler, that way it is triggered by users hitting the Enter key as well as any input[type=submit] buttons I have.

Upvotes: 1

Related Questions