如何禁用“保存”按鈕，直到輸入字段值得到驗證？

Question

我在系統中有一個表單，該表單中的一個字段應在用戶提交表單之前進行驗證。 表單上的第一個字段是“類型”輸入字段，第二個字段是“用戶ID”輸入字段。 這是我當前代碼的工作示例：

 var data = { 93169: "John Rives", 33442: "Mike Cook", 70354: "Tammy Bull", 22078: "Nick Adams" }; $("#user_id").on("keyup", function() { var inputFld = $(this), msgFld = $(this).closest("div").find(".invalid-feedback"); if (!inputFld.val().length) { inputFld.removeClass("is-invalid").val(""); msgFld.text(""); $("#save").prop("disabled", false); } }); $("#user_type").on("change", function() { var inputVal = $(this).val(); if (inputVal) { $("#user_id").prop("disabled", false); } else { $("#user_id").prop("disabled", true); } // Every time on change reset affiliate field and remove the calss. $("#user_id").removeClass("is-invalid").val(""); $("#user_name").text("N/A"); $("#save").prop("disabled", false); }); $("#search_user").on("click", function() { var inputFld = $(this).parent().parent().children("input"), msgFld = inputFld.closest("div").find(".invalid-feedback"), typeID = $("#user_type").val(), saveBtn = $("#save"), userID = inputFld.val(), regex = /^([0-9]{1,5})$/; if (userID) { if (regex.test(userID) === false) { saveBtn.prop("disabled", true); inputFld.addClass("is-invalid"); msgFld.text("User ID has to be numeric 1-5 digits long."); $("#user_name").text("N/A"); } else { var userName = data[userID]; populateUser(userName, inputFld, msgFld, saveBtn); } } else { inputFld.removeClass('is-invalid'); $('#user_name').text('N/A'); } }); function populateUser(userName, inputFld, msgFld, saveBtn) { if (!userName) { saveBtn.prop('disabled', true); inputFld.addClass('is-invalid'); msgFld.text("User doesn't exist."); $("#user_name").text("N/A"); } else { inputFld.removeClass("is-invalid"); $("#user_name").text(userName); } } 

 #search_user { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="https://use.fontawesome.com/a6e6aa2b6e.js"></script> <div class="container"> <form name="my_frm" id="my_frm" autocomplete="off"> <div class="form-row"> <div class="form-group col-4"> <label>User Type:</label> <select class="custom-select browser-default" name="user_type" id="user_type" required> <option value="">--Select Type--</option> <option value="1">Director</option> <option value="2">Project Manager</option> <option value="3">Assistant Manager</option> </select> </div> <div class="form-group col-4"> <label class="control-label" for="user_id">User ID:</label> <div class="input-group"> <div class="input-group addon"> <input class="form-control" type="text" name="user_id" id="user_id" maxlength="5" placeholder="Enter User ID" disabled> <div class="input-group-append"> <button class="btn btn-secondary" type="button" name="search_user" id="search_user"><i class="fa fa-search"></i></button> </div> <div class="invalid-feedback"></div> </div> </div> </div> <div class="form-group col-4"> <p>User Name:</p> <p id="user_name">N/A</p> </div> </div> <div class="row"> <div class="col-12 text-center"> <button class="btn btn-outline-secondary" type="button" name="save" id="save">Save</button> </div> </div> </form> </div> 

在上面的示例中，您將能夠看到帶有一些示例的功能。 我擔心的一件事是，如果用戶輸入用戶ID而沒有單擊搜索按鈕，該怎么辦？ 在這種情況下，用戶仍然可以在驗證用戶ID之前提交表單。 我想知道是否有一種方法可以阻止表單提交/禁用“保存”按鈕，直到用戶ID在該字段中具有值並且該值未通過驗證為止。 如果有人可以幫助我解決該問題，或者您有任何建議，請告訴我。 我也很願意聽聽您是否有更好的方法來完成此驗證。

Answer 1

您可以將一個禁用的屬性（或類）添加到保存按鈕，然后在成功驗證后將其刪除。

在按鈕的回調中，您將檢查按鈕是否已禁用

 $("#save").click(function() { if ($(this).hasClass("disabled")) { console.log("wait for validation!") return; } //do stuff }); $("#val").click(function() { $("#save").removeClass("disabled"); }); 

 .disabled { opacity: .7; cursor: not-allowed; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="btn btn-outline-secondary disabled" type="button" name="save" id="save">Save</button> <button class="btn btn-outline-secondary" type="button" name="val" id="val">Validate</button>