jQuery - 檢查是否有任何字段不爲空的代碼，然後使所有這些都是必需的

我是一名PHP開發人員，也是jQuery的新成員，之前我只寫了幾行代碼，它全部來自在線源。不管怎麼說，我在HTML中有這三個輸入：jQuery - 檢查是否有任何字段不爲空的代碼，然後使所有這些都是必需的

<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').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', ''); 
     } 
    });

來源

2016-03-31 Mohamed Ebrahim

搜索「表單驗證」 –

@Mike C，我搜索了，但我的情況是不同的，我只希望當用戶鍵入的東西，而不是頁面加載或提交。我想要html5所需的標籤。 –

然後搜索「oninput」或「onkeypress」以及表單驗證。 –

使用.attr()在oninput事件。

即是這樣的：

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

然後將它綁定到oninput無論是在你的HTML或JS。

來源

2016-03-31 19:22:37

由於某種原因，這不起作用。讓我知道如果我正確地做到這一點。我已經鏈接到jquery和我的.js文件，它只在html頭部有上面的代碼。然後，我在字段上添加oninput =「makeRequired（）」。但是，它不起作用。 –

看來，jQuery需要第二個參數，即使'required'屬性實際上並不需要。檢查我的編輯！ –

https://jsfiddle.net/aw1qszx3/ –

使用您的條件

如果用戶輸入的任何數據到任何的輸入端。

你可以寫這個事件

$("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'); 
});

來源

2016-03-31 19:25:02 ggderas

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

來源

2016-03-31 19:31:35 Kyle

好了，我都知道：建議使用像jQuery庫驗證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>

a將類添加到密碼類型的輸入中，並使用所需的類（如果您不想使用所需的類，則可以通過所需的attr輕鬆更改該類。

這裏是小提琴：

jsfiddle

來源

2016-03-31 19:43:10

jQuery - 檢查是否有任何字段不爲空的代碼，然後使所有這些都是必需的

回答

相關問題