formvalidation.io 外部提交按钮

Question

Im working with formvalidation.io and have created a form and want to submit the form with a button that is not contained within the form element. Quick example below:

<form id="form1">
  <input name="test" type="text" required />
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

Pressing the button will validate the form, but will not continue to submit the form. Including the same button inside the form element will work perfectly fine. I'm assuming this is a bug in the formvalidation.io library, but I want to post here to make sure I'm not doing something stupid first.

Any thoughts?

Answer 1

whoops, thought i already answered this. i had it confirmed on the formvalidation.io forums that this is a work in progress with their library so this is the workaround i came up with.

        // select all buttons which have the form attribute
        $('[form=' + $(this).attr('id') + ']').click(function (e) {
            // prevent default functionality
            e.preventDefault();

            // execute form validation if necessary
            if (form.data('formValidation') != null) {
                $('#' + $(this).attr('form')).data('formValidation').resetForm();
                $('#' + $(this).attr('form')).data('formValidation').validate();
            }

            // submit your form however you normally submit it
            form.ajaxSubmit(options);
        });