html 按钮正在激活 html 输入表单中的 ASP 验证 - 为什么?

Question

我想问为什么在单击我的自定义按钮后，该按钮只是将文本附加到表单内部的div，然后激活该表单的ASP验证？

<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div id="append_area">
</div>
<button id="appendChild" onclick="addText()">add new thing</button>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
<script>
function addText()
{
var div = document.getElementById('append_area');
div.innerHTML += `test`;
}
</script>

Answer 1

将按钮类型设置为按钮

<button type="button" id="appendChild" onclick="addText()">add new thing</button>

Answer 2

如 W3C 文档中所述，<button>元素的默认type可能因不同的浏览器而异，因此最好始终显式指定它。

在这种情况下，默认值为submit，因此通过单击该按钮，您无意中导致提交操作，因此也执行验证。

要解决此问题，只需将按钮type明确指定为button：

<button type="button" />

Answer 3

你也可以这样做：

<script>
function addText()
{
var div = document.getElementById('append_area');
div.innerHTML += `test`;
return false;
}
</script>

然后，您可以调用代码onclick="return addText()"

Answer 4

当您将表单提交到驻留在服务器上的 CGI 程序时，通常会对其进行编程以自行检查错误。如果找到任何内容，它将页面发送回读者，然后读者必须重新输入一些数据，然后再提交。JavaScript 检查很有用，因为它会在出现问题时阻止表单提交，从而为读者节省大量时间。

<button type="button" id="ChildForm" onclick="add()">add new </button>

CGI脚本仍然更可靠，因为无论是否在客户端启用JavaScript，它总是可以工作;但是拥有这个额外的安全屏障是一件好事。它使您的页面更加用户友好，并消除了必须重复填写相同表格的挫败感。它也非常精确，因为您可以指出出现问题的确切字段。