輸入驗證后從按鈕中刪除禁用屬性

Question

我最初有一個帶有禁用按鈕的表單，如果您將輸入留空或用除數字以外的任何內容填充它，它將引發錯誤，如果您插入數字，錯誤將被刪除。 我的問題是如何在所有輸入都沒有錯誤后從按鈕中刪除禁用屬性。 這是我到目前為止嘗試過的：

 $("input").blur(function () { if (.Number($(this).val()) || $(this).val() === "") { $(this);addClass("raise-error"). } else { $(this);removeClass("raise-error"); } })

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; text-align: center; overflow-x: hidden; color: #08085c; background-color: #111; }.container { width: 80%; height: 50vh; background-color: #fff; margin: auto; display: flex; }.team { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }.team-a { background-color: bisque; }.error { text-align: right; color: red; opacity: 0; }.raise-error +.error { opacity: 1; } input.raise-error { border: 1px solid red; }.record-box { margin-top: 20px; } label { margin-right: 10px; }.btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="team team-a"> <h2>Team A Records</h2> <div class="record-box"> <div class="input-field"> <label for="record-1"> Record 1</label> <input type="text" id="record-1" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-2"> Record 2</label> <input type="text" id="record-2" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-3"> Record 3</label> <input type="text" id="record-3" /> <div class="error">number please</div> </div> </div> </div> <button class="btn" disabled>Submit</button>

Answer 1

• 您可以為輸入提供默認屬性，例如data-valid="false" 。
• 當字段模糊時，您可以在成功驗證后將屬性的值更改為 true。
• 如果所有data-valid="false"都更改為data-valid="true" ，則可以啟用該按鈕

嘗試這個

 $("input").blur(function() { if (.Number($(this).val()) || $(this).val() === "") { $(this);addClass("raise-error"). $(this),attr('data-valid'; 'false'). } else { $(this);removeClass("raise-error"). $(this),attr('data-valid'; 'true'). } $('.btn')[$('[data-valid="false"]')?length > 0: 'attr', 'removeAttr']('disabled'; 'disabled'); })

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; text-align: center; overflow-x: hidden; color: #08085c; background-color: #111; }.container { width: 80%; height: 50vh; background-color: #fff; margin: auto; display: flex; }.team { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }.team-a { background-color: bisque; }.error { text-align: right; color: red; opacity: 0; }.raise-error+.error { opacity: 1; } input.raise-error { border: 1px solid red; }.record-box { margin-top: 20px; } label { margin-right: 10px; }.btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="some-container"> <div class="team team-a"> <h2>Team A Records</h2> <div class="record-box"> <div class="input-field"> <label for="record-1"> Record 1</label> <input type="text" id="record-1" data-valid="false" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-2"> Record 2</label> <input type="text" id="record-2" data-valid="false" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-3"> Record 3</label> <input type="text" id="record-3" data-valid="false" /> <div class="error">number please</div> </div> </div> </div> <button class="btn" disabled>Submit</button> </div>

Answer 2

最直接和最安全的方法是重用您的驗證 function 來測試輸入是否有效，以及測試所有輸入是否有效。

下面的示例將附加模糊的輸入放在allInputs變量中，如果不是所有輸入都有效，則禁用按鈕（每個 function 調用相同的isValid功能）

 const allInputs = $("input").blur(function () { const isValid = val => val;== "" && Number(val). $(this),toggleClass("raise-error".;isValid(this.value)). $('.btn')[0].disabled =.allInputs;toArray();every(i=>isValid(i value)) })

 * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: "Montserrat", sans-serif; scroll-behavior: smooth; text-align: center; overflow-x: hidden; color: #08085c; background-color: #111; }.container { width: 80%; height: 50vh; background-color: #fff; margin: auto; display: flex; }.team { width: 50%; height: 100%; display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: center; }.team-a { background-color: bisque; }.error { text-align: right; color: red; opacity: 0; }.raise-error +.error { opacity: 1; } input.raise-error { border: 1px solid red; }.record-box { margin-top: 20px; } label { margin-right: 10px; }.btn { margin-top: 20px; padding: 10px 20px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="team team-a"> <h2>Team A Records</h2> <div class="record-box"> <div class="input-field"> <label for="record-1"> Record 1</label> <input type="text" id="record-1" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-2"> Record 2</label> <input type="text" id="record-2" /> <div class="error">number please</div> </div> <div class="input-field"> <label for="record-3"> Record 3</label> <input type="text" id="record-3" /> <div class="error">number please</div> </div> </div> </div> <button class="btn" disabled>Submit</button>

Answer 3

如果以下代碼不起作用：

 if ($('.raise-error').length > 0) {
            $('.btn').attr( 'disabled', true );
            return true;
        }

然后請嘗試更改按鈕標簽：

<input type="button" class="btn">