Question

上面给出的是小提琴。

我有一个简单的登录表单。用户名，密码textfield＆amp;提交按钮。提交按钮被禁用，直到用户名和＆amp;输入密码。我已经使用下面给出的jQuery函数成功完成了这项工作。

var $input = $('input'),
$register = $('#signin');
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});

以下是我的表格。

<div class="form-group">
    <label for="txtusername" class="col-sm-4 control-label">Username</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" id="txtusername" name="txtusername" placeholder="Username">
    </div>
</div>
<div class="form-group">
    <label for="txtpassword" class="col-sm-4 control-label">Password</label>
    <div class="col-sm-8">
        <input  type="password" class="form-control" id="txtpassword" name="txtpassword" placeholder="Password">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <div class="checkbox">
            <label><input type="checkbox">Remember me</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <button type="submit" id="signin" class="btn btn-default"  >Sign in</button>

</div>

您知道当用户输入其凭据并提交按钮时，网络浏览器会要求存储密码＆amp;如果用户点击是，他的密码＆amp;用户名存储在浏览器中。所以下一次，当他访问该页面时，他的用户名和＆amp;密码已填写在文件中。现在出现问题，即使Web浏览器（chrome，firefox）自动填写用户的表单，该按钮仍然被禁用。为了启用按钮，用户需要输入字段的任何一个字段（甚至是单个字母）以启用该按钮。从技术上讲，这是不对的。由于数据已经填写在表单中（通过浏览器），因此必须启用该按钮。任何建议，使其像???

Answer 1

$.fn.extend({
    has_value: function() {
        return this.filter( function() {
            return $( this ).val().length == 0;
        }).length;
    }
});

var $input = $( 'input.form-control' ),
    $register = $('#signin');

$input.on( 'change keyup', function() {
    $register.prop( 'disabled', $input.has_value() );       
}); 

$input.trigger( 'change' );

说明

第一部分是扩展jQuery原型对象的示例，添加了has_value()方法，并且由于该方法现在是jQuery的一部分，因此可以在DOM元素集合上调用任何其他方法。此方法按值过滤元素，如果没有具有空值的元素，则返回true。
要成功监控输入字段中的更改，必须至少使用两个事件change和keyup。用户名和密码的输入元素绑定到这两个事件。当元素失去焦点时会触发更改事件，并在用户释放键时触发键盘。
事件处理程序启用或禁用该按钮，为此，它使用jQuery推荐的.prop()方法设置disabled属性，以避免行为不一致。
此代码应放在domready事件中，我们可以在哪里立即触发更改事件并测试这些字段是否由浏览器自动填充。
<强> FIDDLE

浏览器自动填充

由于Web浏览器不一致，您无法依赖浏览器自动填充输入字段时触发更改事件。有一个简单的解决方法可以使用setInterval()函数来定期监视更改。由于我们只处理具有几个输入字段的小表单，因此可以安全地使用它而没有明显的滞后。

setInterval( function() {
    $input.trigger( 'change' );
}, 100 );

建议

HTML5 required属性（由任何理智的浏览器支持）不是手动编写所有代码，而是完成所有这些操作。此属性指定用户在提交表单之前必须填写值。如果任何必填字段为空，浏览器将阻止表单提交，并且用户还将收到填写该字段的通知。

其他信息

jQuery扩展：jQuery.fn.extend()
jQuery事件：.change() .keyup()
jQuery属性：.prop() .prop() vs .attr()：
自动填充：Browser Autofill，Autocomplete and JavaScript Change Event
HTML5：required attribute

Answer 2

您可以添加以下代码。因此它最初会在没有任何关键触发的情况下进行检查。

$(document.ready(function(){
   $input.each(function() {
                if (!$(this).val()) {
                    trigger = true;
                }
        });

 });

Answer 3

可能的原因是您在输入的键盘事件中删除了按钮的“禁用”属性。当用户手动填写表单时，这没关系。但是如果输入被浏览器自动填满，那么您必须检查文档就绪事件的输入值，并根据您需要将禁用属性应用于按钮的结果。以下是示例：

$(document).ready(function(){
  HandleButtonState();
  $input.keyup(function() {
      HandleButtonState();
  });
}); 

function HandleButtonState(){
    var trigger = false;
    $input.each(function() {
       if (!$(this).val()) {
          trigger = true;
       }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
}

Answer 4

您可以检查天气表格在加载时是否为空白，以及如下所示的键盘：

$(function(){
  var $input = $('input:not(:checkbox)'),// Check box is having some value even when not checked so ommitting it.
              $register = $('button:submit');
              $register.attr('disabled', !isFilledForm());

  $input.keyup(function() {
      $register.prop('disabled', !isFilledForm())
  });

  function isFilledForm(){
      var isFilled = true;
      $input.each(function(){
        if(!$(this).val()) isFilled = false;
      })
      return isFilled
  }
})

请找到我已删除密码字段值的更新小提示，以便在任何输入中说明预填充值。正在启用登录按钮。

UPDATED FIDDLE

Updated Fiddle仅在填写两个字段时启用登录按钮

Revised Fiddle将所有内容保存在document.ready中。

我在浏览器中检查了这个。希望这有帮助。

Answer 5

你能试试这个javascript而不是你的吗？

var $input = $('input'),
$register = $('#signin');
$register.attr('disabled', true);
$input.keyup(function() {
var trigger = false;
$input.each(function() {
    if (!$(this).val()) {
        trigger = true;
    }
});
trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
$('.form-group').on('change', function(){
  var usr_name = $('#txtusername').val().length;
  var usr_pass = $('#txtpassword').val().length;
  if(usr_name < 1 || usr_pass < 1){
    $register.attr('disabled', true);   
  }
});

这里不小心检查http://jsfiddle.net/vaske1986/va4Kz/

Answer 6

$(document).ready(function() {
    checkLoginStats();
    $("#txtusername").attr("onkeyup","checkLoginStats();");
    $("#txtpassword").attr("onkeyup","checkLoginStats();");
});

function checkLoginStats()
{
    var userName   = $("#txtusername").val();
    var userPass   = $("#txtpassword").val();
    var buttonStat = true;
    if(userName!="" && userPass!="")
    {
        buttonStat = false;
    }
    $("#signin").attr("disabled",buttonStat);
}

希望这可能会成功 http://jsfiddle.net/jy3UR/8/

Answer 7

一些注意事项：

如果要动态更改disabled状态，请更好地使用属性，而不是属性。
您可以轻松使用every。

each

当jQuery没有简化代码时，请考虑使用更快的vanilla-js。
如果您收听keyup而不是input事件，则您不会注意到用户是否使用鼠标更改字段。

使用ES5代码：

var inputs = [].slice.call(document.getElementsByTagName('input')),
    register = document.getElementById('signin');
function check() {
    register.disabled = !inputs.every(function(inp) {
        return inp.value;
    });
}
$(inputs).on('input', check);
check();

Demo

Answer 8

只是输入的触发键UP功能

$("input").keyup();

就像那个一样简单

它会触发文本框的按键事件（不会将任何数据添加到文本框中），因此您的密钥代码将检查文本框是否填充数据并启用按钮

小提琴链接Demo

完整代码

  $(document).ready(function () {
     var $input = $('input'),
        $register = $('#signin');
        $register.attr('disabled', true);

        $input.keyup(function() {
            var trigger = false;
            $input.each(function() {
                if (!$(this).val()) {
                    trigger = true;
                }
            });
            trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
        });

        $("input").keyup();

    })

Answer 9

试试我的小提琴......

http://jsfiddle.net/jy3UR/13/

我已设置超时，如果您将此脚本放在正文结束标记之前，则会在页面加载后触发2秒，'。

 var $input = $('input'), $register = $('#signin');

$register.attr('disabled', true);

$input.keyup(function() {
    validateForm();
});

var validateForm = function (){
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
};

setTimeout(validateForm(), 2000);

Answer 10

我在这里更新了小提琴上的代码：

http://jsfiddle.net/jy3UR/14/

var $input = $('input'),
            $register = $('#signin');
            $register.attr('disabled', true);

var checkInput = function(){
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
}

$input.keyup( function(){
    checkInput();
} );

$(document).ready( function(){
    checkInput(); 
} );

并检查代码是否正常运行。

变更简要说明：

以前，您只是在keyup事件中检查表单值状态。现在，我们正在检查文档准备好了。整个条件被检查两次，这就是为什么它现在放在一个函数内。

的调试：

我在输入上放置了值字段并预先填充了用户名字段。您可以填充密码字段并检查如果两个字段都已填满，则按钮将变为启用状态。反之亦然，如果没有输入或仅填充了一个字段，则按钮保持禁用状态。

Answer 11

使用以下JavaScript代码

var $input = $('input'),

  $register = $('#signin');
  $register.attr('disabled', true);

  //update signin button    
  function isDisabled($input,$register){
         var trigger = false;
                    $input.each(function() {
                        if (!$(this).val()) {
                            trigger = true;
                        }
                    });
         trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
    }

 //check signin button status on window load event   
 $(window).load(function(){
         isDisabled($input,$register)
    });

//check signin button status on keyup event 
  $input.keyup(function() {
                    isDisabled($input,$register)
  });

Answer 12

把它放在你的jquery代码之后。确保它在它之后

    var $input = $('input'),
    $register = $('#signin');
    $register.attr('disabled', true);

    $input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
   });


   $('.form-group > input').on('input', function () {

        var empty = false;
        $('form > input, form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });

        if (empty) {
            $('#signin').attr('disabled', 'disabled');
        } else {
            $('#signin').removeAttr('disabled');
        }
    });

试试这个，看看你是否得到了理想的结果

检查这个小提琴http://jsfiddle.net/DaCardinal/P2c2g/

Answer 13

在加载文档时编写代码，使用$(document).ready(function(){ /*your validation code*/})

Answer 14

根据文件是否已由document.onload填充，您可以使用

进行检查

$(document).ready(function () {
  // trigger validation
});

如果现在还为时过早，我担心您只能尝试添加超时（window.setTimeout()），如果这对您不起作用，您可以解决将autocomplete="off"添加到输入中的问题字段。

Answer 15

我修改了你的代码，这是新的工作DEMO 您应该在文档加载上调用一个函数，该函数检查txtusername和password是否为空。如果它们已经填满了页面加载，那么你应该编写一些启用按钮的代码。

注意：我在HTML内容周围添加了<form>标记

注释掉现有代码并尝试以下代码：

$(document).ready(function(){
    function check()
    {
        var txtusername = $('#txtusername').val();
        var txtpassword = $('#txtpassword').val();
        alert('txtusername = '+txtusername+' txtpassword = '+txtpassword);
        if(txtusername !="" && txtpassword != "")
        {
            $('#signin').attr('disabled', false);
        }
        else
        {
            $('#signin').attr('disabled', true);
        }
    }    
    var $input = $('input');
    $input.keyup(function() {
        check();
    });
    check();
});

Answer 16

var hasUsername = false
  , hasPassword = false;

$('#password').on('keyup', function(e){
    var val = $(this).val();

    if ( val.length > 8 ) {
        hasUsername = true;
    }

    checkButton();
});

$('#password').on('keyup', function(e){
    var val = $(this).val();

    if ( val.length > 8 ) {
        hasPassword = true;
    }

    checkButton();
});

function checkButton(){
    if ( hasUsername && hasPassword ) {
        $("button").attr('disabled', false);
    }
}

浏览器自动填充数据时启用按钮

16 个答案:

说明

浏览器自动填充

建议

其他信息

变更简要说明：

的调试：