jQuery-用于检查是否有任何字段不为空，然后将所有字段设为必需字段的代码

jQuery - Code to check if any of the fields are not empty, and then make all of them required

本文关键字：字段 代码 然后 检查 用于 是否 任何 jQuery-      更新时间：2023-11-07

我是一名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', '');
        }
    });

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

例如：

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

然后在HTML或JS中将其绑定到oninput。

使用您的条件

如果用户将任何数据输入到任何输入中。

你可以写这个事件

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

好吧，我非常建议使用像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

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