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