我使用这种方式，并喜欢它，它在提交之前验证表单也兼容safari/谷歌。没有jquery n.n。

        <module-body>
            <form id="testform" method="post">
                <label>Input Title</label>
                <input name="named1" placeholder="Placeholder"  title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>

                <label>Input Title</label>
                <input placeholder="Placeholder" title="Please enter only alphanumeric characters." required="required" pattern="[A-Za-z0-9]{1,20}" />
                <alert>No Alerts!</alert>
            </form>
        </module-body>
        <module-footer>
            <input type="button" onclick='if (document.querySelector("#testform").reportValidity()) { document.querySelector("#testform").submit(); }' value="Submit">
            <input type="button" value="Reset">
        </module-footer>

类似于这里的另一个解决方案，只是稍加修改:

<form method="METHOD" id="FORMID">
   <!-- ...your inputs -->
</form>
<button type="submit" form="FORMID" value="Submit">Submit</button>

https://www.w3schools.com/tags/att_form.asp

一个对我很有效的解决方案，在这里仍然没有。它需要在<表单>中有一个视觉上隐藏的<submit>或<input type="submit">元素，并在其外部有一个相关的<label>元素。它看起来是这样的:

<form method="get" action="something.php">
     <input type="text" name="name" />
     <input type="submit" id="submit-form" class="hidden" />
</form>

<label for="submit-form" tabindex="0">Submit</label>

现在，该链接允许您通过单击<label>元素来“单击”表单<submit>元素。

如果你会使用jQuery，你就可以使用这个

<form method="get" action="something.php" id="myForm">
    <input type="text" name="name" />

    <input type="submit" style="display:none" />
</form>

<input type="button" value="Submit" id="myButton" />

<script type="text/javascript">
    $(document).ready(function() {
       $("#myButton").click(function() {
           $("#myForm").submit();
       });
    });
</script>

所以，底线是创建一个按钮像提交，并把真正的提交按钮在表单(当然隐藏它)，并通过jquery通过点击“Fake Submit”按钮提交表单。希望能有所帮助。

你的<按钮>将需要有这2个属性:type="submit"和form="form_id"如果它在表单之外。例子:

<form id="my-form">
   ...
</form>

<button type="submit" form="my-form">
   Submit
</button>

此外，<button>元素还可以具有formmethod和formaction属性，分别覆盖表单的方法和动作。例子:

<button type="submit" form="my-form" formmethod="post" formaction="/something.php">
   Submit
</button>

下面是<button>元素所有可用属性的引用:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

在HTML5中，有form属性。基本上

<form id="myform" method="get" action="something.php">
    <input type="text" name="name" />
</form>

<input type="submit" form="myform" value="Update"/>