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

与described in W3C documentation一样，.nav { width: 100%; min-width: 80%; position: relative; left: 15%; top: 20px; } ul { margin: 0px; padding: 0px; list-style: none; } ul li { float: left; width: 100px; height: 40px; opacity: .8; line-height: 40px; text-align: center; font-size: 65%; margin-right: 2px; } ul li a { text-decoration: none; color: black; display: block; } ul li a.color { color: black; border-bottom: 0.5px solid rgb(80, 80, 80); border-left: 0.5px solid rgb(80, 80, 80); border-right: 0.5px solid rgb(80, 80, 80); font-size: 130%; width: 150px; text-align: left; padding-left: 10px; box-shadow: 1px 1px 2px rgba(179, 176, 176, 0.5); } ul li ul.drop-menu { position: relative; text-align: left; } .drop-menu { display: none; } .drop:hover > .drop-menu { display: block; }元素的默认<div class ="top-bar"> <div class="row"> <img class="logo" src="Images/logo-blanco.png" alt="logo"> <div class="nav"> <ul> <li><a href="#" id="inicio">Inicio</a></li> <li class="drop">Demos <ul class="drop-menu"> <li><a href="#" class="color" id="castellano">Castellano</a></li> <li><a href="#" class="color">Ingles</a></li> <li><a href="#" class="color">Videos</a></li> </ul> </li> <li><a href="#" >Como Trabajo</a></li> <li><a href="#">Quien Soy</a></li> <li><a href="#">Hablan de mi</a></li> <li><a href="#">Contacta</a></li> <li><a href="#" id="blog">Blog</a></li> </ul> </div> </div> </div>在不同的浏览器中会有所不同，因此，最好始终明确指定它。

在这种情况下，默认值为type，因此，单击该按钮会无意间导致提交操作并因此也会执行验证。

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

type

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，它都可以正常工作。但是拥有这种额外的安全屏障是一件好事。它使您的页面更加用户友好，并且消除了必须重复填写相同表单的麻烦。这也非常精确，因为您可以指出存在问题的确切字段。

html按钮正在以html输入形式激活asp验证-为什么？

4 个答案: