Действие формы не прерывается «обязательными» входами

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' вместо 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", после чего ваша форма отправит

Answer 2

Это потому, что вы не отправляете форму.Создание последней кнопки типа 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>