jQuery-檢查所有字段是否為空的代碼，然后將所有字段設置為必需

Question

我是PHP開發人員，並且是jQuery的新手，我之前只寫了幾行代碼，而這些都是來自在線資源。 無論如何，我在html中有以下三個輸入：

<input type="password" name="old-password" id="old-password">
<input type="password" name="new-password" id="new-password">
<input type="password" name="confirm-new-password" id="confirm-new-password">
<button type="submit" id="save" class="button button-primary">Save Changes</button>

我有一整頁的設置，這三個字段用於輸入密碼，但是我只想在用戶將任何數據輸入到任何輸入中時才要求輸入密碼。

示例：用戶輸入舊密碼輸入，所有3個輸入均實時獲取。 或者用戶輸入確認新密碼輸入，則還需要全部3個輸入。

感謝您的幫助。

解決方案：答案都很好，謝謝大家的幫助。 出現另一個問題是，如果有人嘗試退格並刪除表單上的文本，它仍然保持必需狀態。 在所有答案的幫助下，我想出了一個解決方案。

您必須將.password類添加到所有所需的輸入中，然后將其放入腳本標簽中：

    $('.password').on('keyup keydown keypress change paste', function() {
        if ($(this).val() == '') {
            $('#old-password').removeAttr('required', '');
            $('#new-password').removeAttr('required', '');
            $('#confirm-new-password').removeAttr('required', '');
        } else {
            $('#old-password').attr('required', '');
            $('#new-password').attr('required', '');
            $('#confirm-new-password').attr('required', '');
        }
    });

Answer 1

在oninput事件上使用.attr() 。

即是這樣的：

function makeRequired(){
    $("#old-password").attr("required","");
    $("#new-password").attr("required","");
    $("#confirm-new-password").attr("required",""); 
}

然后將其綁定到HTML或JS中的oninput 。

Answer 2

使用您的條件

如果用戶在任何輸入中輸入任何數據。

你可以寫這個活動

$("body").on("input", "#confirm-new-password,#new-password,#old-password", function()
{
    $("#confirm-new-password").attr('required', 'required');
    $("#new-password").attr('required', 'required');
    $("#old-password").attr('required', 'required');
});

Answer 3

if ($("#old-password").val() != "" ||
    $("#new-password").val() != "" ||       
    $("#confirm-new-password").val() != "") {   
  $("#old-password").attr("required");
  $("#new-password").attr("required");
  $("#confirm-new-password").attr("required");
}

Answer 4

好吧，我極力推薦使用像Jquery一樣的庫validate jqueryValidate

但是，如果您不想使用，可以嘗試以下操作：

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <input type="password" name="old-password" id="old-password" class="passwordToCheck">
    <input type="password" name="new-password" id="new-password" class="passwordToCheck">
    <input type="password" name="confirm-new-password" id="confirm-new-password" class="passwordToCheck">
    <button type="submit" id="save" class="button button-primary">Save Changes</button>
    <script>
      $(".passwordToCheck").change(function(){
        passInput = $(this);
      if(passInput.val().trim() != ""){
        passInput.addClass("required");
      } else {
        passInput.removeClass("required");
      }
    });

    $("#save").click(function(e){
        e.preventDefault();
      if($(".required").length >0){
        alert("fill the fields!");
      } else {
        alert("OK");
        $(this).submit();
      }
    });
   </script>

將一個類添加到您的密碼類型輸入中，然后使用必需的類（如果您不想使用必需的類，可以通過必需的attr輕松更改此類。

這是小提琴：

jsfiddle