代码之家 › 专栏 › 技术社区 › posfan12

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

forms html javascript

posfan12 · 技术社区 · 6 年前

我有下面的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>

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

如何使“必需”输入在填写不正确时中断表单操作?谢谢。

2 回复 | 直到 6 年前

Muhammad Usman 6 年前

这是因为你没有提交表格。最后一个按钮 button 不会使其成为提交按钮。您必须指定 type='submit' 显式地使按钮提交表单。

现在到第二部分,

如果您试图提交来自 JS 功能。HTML5验证不起作用。

不过,只有当表单在表单中使用submit类型的按钮提交时,它们才起作用。如果你真的想用 按钮 并提交表格 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>

Bhargav Chudasama 6 年前

试试这个

使用 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" 在那之后你的表格将提交