使用锚点作为提交按钮会导致模式属性无法验证

Using anchor as submit button causes pattern property not to be validated

本文关键字：模式 属性 验证 按钮 提交      更新时间：2023-09-26

我有一个表单，它使用了一个锚作为提交按钮，如下所示：

<!DOCTYPE html>
<head>
    <script src="jquery.js"></script>
</head>
<body>
<form action="" method="post">
    <input type="text" pattern="[A-Za-z]{3}" />
    <a href="#" class="submit">Submit</a>
    <input type="submit" />
</form>
<script>
$(".submit").click( function(e) {
    var form = $(this).parents('form:first');
    form.submit();
    //e.preventDefault();
});
</script>
</body>
</html>

当我单击提交按钮时，我会看到一条消息，告诉我验证失败。当我单击提交锚点时，表单将被提交。使用锚点作为提交按钮时，如何触发验证？

我可以做到：

<form action="" method="post">
    <input type="text" pattern="[A-Za-z]{3}" />
    <a href="#" class="submit">Submit</a>
    <input style="display: none" id="i_submit" type="submit" />
</form>
//snip
<script>
$(".submit").click( function(e) {
    $("#i_submit").click();
});
</script>

它确实验证了表单，阻止了提交，并在输入字段周围画了一个红色边框，但它不会像点击真正的提交按钮时那样显示任何类型的错误消息。

我如何让错误消息弹出，就像点击了真正的提交按钮一样？

使用jQuery，您只能这样做：

<form action="" method="post" id="form1">
    <input type="text" pattern="[A-Za-z]{3}" />
    <a href="#" class="submit">Submit</a>
    <input style="display: none" id="i_submit" type="submit" />
</form>
$(".submit").click(function(e){
e.preventDefault();
if(validate()) // function that validates your form (returns true or false)
{
$("#form1").submit();
}
});

如果您想使用超级链接作为提交按钮，可以使用以下格式来触发该函数。

提交

您也可以访问此处：HTML标记<a>想要添加href和onclick工作

相关文章：