在 javascript 上要求 html5 返回 true 后，如何禁用提交按鈕？

Question

我的 html 代碼是這樣的：

<form>
    <label for="name">* Name</label>
    <input type="text" id="name" required><br>
    <label for="name">* Address</label>
    <input type="text" id="address" required><br>
    <input type="submit" value="Submit">
</form>

我正在使用required的 HTML5 屬性來驗證字段。

如果用戶沒有輸入文本，它會顯示 HTML5 錯誤。

如果任何必填字段留空，我想禁用提交按鈕。

我該怎么做？

Answer 1

您可以使用CSS禁用按鈕上的指針事件。

 form:invalid>#submit { pointer-events: none; } 

 <form> <label for="name">* Name</label> <input type="text" id="name" required><br> <label for="name">* Address</label> <input type="text" id="address" required><br> <input type="submit" value="Submit" id="submit"> </form> 

您也可以使用Javascript禁用該按鈕。

 function disableField() { const invalidForm = document.querySelector('form:invalid'); const submitBtn = document.getElementById('submit'); if (invalidForm) { submitBtn.setAttribute('disabled', true); } else { submitBtn.disabled = false; } } disableField(); const inputs = document.getElementsByTagName("input"); for (let input of inputs) { input.addEventListener('change', disableField); } 

 <form> <label for="name">* Name</label> <input type="text" id="name" required><br> <label for="name">* Address</label> <input type="text" id="address" required><br> <input type="submit" value="Submit" id="submit"> </form> 

Answer 2

你可以做到之后

$("#button").prop("disabled", true);

Answer 3

您可以嘗試如下操作：

$(function() {
$("#input-text").keyup(function () {
 if($("#input-text")[0].checkValidity()){
      $('#submit-button').attr('disabled', 'disabled');
 }else{
        $('#submit-button').removeAttr('disabled');
 }
 });
})($);

<form id="newRecord">
<input type="text" required id="input-text"/>
<button form="newRecord" type="submit" id="submit-
button">Submit</button>
</form>

Answer 4

一種更通用的解決方案，適用於多種形式並支持多種輸入和按鈕。

它直接在表單上單獨檢測更改事件，然后更改所有提交類型的禁用屬性

 function disableFormSubmit(form) { const buttons = form.querySelectorAll( 'button[type="submit"], input[type="submit"]' ); const disableButtons = () => buttons.forEach(el => (el.disabled = form.matches(":invalid"))); form.addEventListener("change", disableButtons); disableButtons(); } document.querySelectorAll("form").forEach(disableFormSubmit);

 <form action="/"> <legend>First form</legend> <input type="text" required> <br> <input type="Checkbox" required> required checkbox <br> <input type="submit"> <button type="submit">Button submit</button> </form> <hr> <form action="/"> <legend>Second form</legend> <select required> <option value="" disabled selected>Select one</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <input type="radio" required name="radio"> required radio <br> <input type="submit"> <button type="submit">Button submit</button> </form>

就我個人而言，除非您需要 disabled 屬性，否則我會繼續使用僅 CSS 作為視覺提示的解決方案