Question

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

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

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

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

Answer 1

使用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();
}
});

Answer 2

如果要将超链接用作提交按钮，可以使用以下格式来触发该功能。

提交

你也可以去这里： HTML tag <a> want to add both href and onclick working

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

2 个答案: