javascript - 表单操作不会被 "required"输入中断

Question

我有以下 HTML 代码。

function document_save_changes(){
	if (is_key_dirty == true){
		var elm = document.getElementById('set_doc_button');
		key_change_warning(elm, 'D');
		return;
	}
	if (document_save_warning('A') == false){
		return;
	}
	collect_nonkey_data();
	do_recaptcha();
}

<form id="email_form">
	<div id="email_table" class="emltbl inbtop" style="margin:auto;">
		<div class="emlrow">
			<div class="emlcll">Name:</div>
			<div class="emlcll"><input class="email_input" type="text" name="email_1" id="email_1" placeholder="First and last name" required autocomplete="on" data-lpignore="true"/></div>
		</div>
		<div class="emlrow">
			<div class="emlcll">Email:</div>
			<div class="emlcll"><input class="email_input" type="email" name="email_2" id="email_2" placeholder="Return email address" required autocomplete="on" data-lpignore="true"/></div>
		</div>
		<div class="emlrow">
			<div class="emlcll">Messg:</div>
			<div class="emlcll"><textarea class="email_textarea" name="email_3" id="email_3" placeholder="Message to admin" required autocomplete="off"></textarea></div>
		</div>
	</div>
	<div id="email_recaptcha" class="g-recaptcha" data-sitekey="key goes here"></div>
	<div><button id="set_doc_button" type="button" style="padding:0.3em 1em;" disabled="disabled" autocomplete="off" onclick="document_save_changes();" title="Submit changes to data">Submit Data</button></div>
</form>

我的问题是，当 INPUT 元素未正确填写时，“必需”INPUT 元素不会导致表单提交失败。 (例如，通过需要特殊语法的 type="email" INPUT 元素。)

如果“必需的”输入未正确填写，如何才能中断表单操作？谢谢。

Answer 1

这是因为您没有提交表单。在 button 类型的最后创建一个按钮不会使其成为提交按钮。您必须显式指定 type='submit' 才能使按钮提交表单。

现在进入第二部分，

如果您尝试从 JS 函数提交表单。 HTML5 验证将不起作用。

简而言之，只有当使用表单内的“提交”类型的按钮提交表单时，它们才会起作用。如果您确实想使用 button 类型的按钮并使用 JS 提交表单，则必须检查 JS 中的验证> 代码。

在您的 JS 代码中，您可以在任何表单上使用 checkValidity() 函数来检查它是否有效，然后相应地运行其他操作

var form = document.getElementById("email_form");

function document_save_changes() {
    //Do your things
    if (form.checkValidity()) {
        form.submit();
    } else {
        alert("Something worng yet")
    }

}

<form id="email_form">
   <div id="email_table" class="emltbl inbtop" style="margin:auto;">
      <div class="emlrow">
         <div class="emlcll">Name:</div>
         <div class="emlcll"><input class="email_input" type="text" name="email_1" id="email_1" placeholder="First and last name" required autocomplete="on" data-lpignore="true"/></div>
      </div>
      <div class="emlrow">
         <div class="emlcll">Email:</div>
         <div class="emlcll"><input class="email_input" type="email" name="email_2" id="email_2" placeholder="Return email address" required autocomplete="on" data-lpignore="true"/></div>
      </div>
      <div class="emlrow">
         <div class="emlcll">Messg:</div>
         <div class="emlcll"><textarea class="email_textarea" name="email_3" id="email_3" placeholder="Message to admin" required autocomplete="off"></textarea></div>
      </div>
   </div>
   <div id="email_recaptcha" class="g-recaptcha" data-sitekey="key goes here"></div>
   <div><button id="set_doc_button" type="button" style="padding:0.3em 1em;"  autocomplete="off" onclick="document_save_changes();" title="Submit changes to data">Submit Data</button></div>
</form>