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元素需要特殊的语法。）

如何使“必需的” INPUT（如果未正确填写）中断表单操作？谢谢。

Answer 1

这是因为您没有提交表单。在类型为button的末尾创建按钮不会使其成为提交按钮。您必须明确指定type='submit'才能使按钮提交表单。

现在进入第二部分，

如果您尝试通过JS函数提交表单。 HTML5验证无效。

简而言之，它们仅在表单提交且表单中的按钮类型为Submit时才起作用。而且，如果您确实想使用类型为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>

Answer 2

尝试这个

使用button type='submit'代替button

<button id="set_doc_button" type="submit" style="padding:0.3em 1em;"  autocomplete="off" onclick="document_save_changes();" title="Submit changes to data">Submit Data</button>

并在提交表单后删除disabled="disabled"

表单动作不会被“必需”输入中断

2 个答案: