提交之前的html5检查表

时间:2014-12-27 10:47:42

标签: javascript html html5 forms

这是我的HTML:

    <form id="searchForm" action="search.php" method="get">
                <input name="q" pattern="[a-zA-Z0-9]{3,}" placeholder="search..." >
                <span onClick="searchForm.submit()" class="input-group-addon">
                <i class="glyphicon glyphicon-search"></i></span>      
     </form>  

当我点击span时,onClick="searchForm.submit()"会在不验证模式的情况下提交表单。

我想要的是什么:
当我单击span时,它会检查模式并在模式不适合时显示标准HTML5消息错误,否则它将提交表单。

1 个答案:

答案 0 :(得分:0)

将其更改为使用提交按钮或输入类型=“图像”并添加字段所需

<form id="searchForm" action="search.php" method="get">
    <input name="q" pattern="[a-zA-Z0-9]{3,}" placeholder="search..." required>
    <button type="submit">Submit</button>
</form> 

请注意,Safari不支持提交http://caniuse.com/#feat=form-validation

中必填字段的表单验证

如上所述,您不需要使用按钮,也可以使用输入类型=“图像”

<form id="searchForm" action="search.php" method="get">
    <input name="q" pattern="[a-zA-Z0-9]{3,}" placeholder="search..." required>
    <input width="24px" height="24px" type="image" src="data:image/png;base64,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"/>
</form>