Кнопка HTML активирует проверку ASP в форме ввода HTML - Почему?

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

Вы также можете сделать это:

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

, затем вы можете позвонить по коду onclick="return addText()"

Answer 2

Как указано в документации W3C , значение type элемента <button> по умолчанию может различаться в разных браузерах, поэтому рекомендуется всегда указывать его явно.

Вв этом случае значением по умолчанию является submit, поэтому, нажав кнопку, вы непреднамеренно вызвали действие отправки и, следовательно, также проверку правильности.

Чтобы это исправить, просто укажите кнопку type явно как button:

<button type="button" />

Answer 3

Когда вы отправляете форму в CGI-программу, которая находится на сервере, она обычно запрограммирована на собственную проверку на наличие ошибок.Если он находит что-либо, он отправляет страницу обратно читателю, который затем должен повторно ввести некоторые данные перед повторной отправкой.Проверка JavaScript полезна, потому что она останавливает отправку формы в случае возникновения проблем, экономя много времени для ваших читателей.

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

Сценарий CGI все еще более надежен, поскольку он всегда работает независимо отвключен ли JavaScript на стороне клиента или нет;но иметь этот дополнительный защитный барьер - хорошая вещь, чтобы иметь место.Это делает вашу страницу более удобной для пользователя и избавляет от необходимости повторять одну и ту же форму.Это также очень точно, так как вы можете указать точное поле, где есть проблема.

Answer 4

Установите тип кнопки как кнопку

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