【问题标题】:html5 check form before submit it [duplicate]html5在提交之前检查表单[重复]
【发布时间】:2015-02-24 07:39:33
【问题描述】:

这是我的 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 消息错误,否则会提交表单。

【问题讨论】:

  • 重复问题有一个答案明确指出,当您使用JavaScript提交表单时,您需要自己进行验证。这是其中之一,而不是两者。

标签: javascript html forms


【解决方案1】:

将其更改为使用提交按钮或输入 type="image" 并添加所需的字段

<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> 

【讨论】:

  • 我不想使用按钮!
  • @user300675 从语义上讲,您应该使用&lt;button&gt;&lt;input type=submit&gt;。如果您不喜欢它的外观,可以对其应用样式。
  • @user300675 您也可以使用 input type="image" ,如我修改后的示例所示,这将为您提供所需的所有样式魔力。附带说明:使用这样的跨度会使残障人士无法访问您的表单,并且是不好的编码实践,而不是语义等。
猜你喜欢
  • 1970-01-01
  • 2012-07-08
  • 1970-01-01
  • 2022-11-24
  • 2019-07-26
  • 2016-08-06
  • 1970-01-01
  • 2014-06-09
  • 2011-03-13
相关资源
最近更新 更多