Jquery每个事件

Question

我正在尝试验证一个登录表单。我正在获取一个div的子元素，并迭代所有输入元素。一切都运行良好。但是当焦点移动到密码字段并且如果我删除所有用户名的值，它不会给出必需的错误提示。我的代码：

<div class="login-contents">
    <input type="text" name="name" class="form-control login-check" id="login-name" placeholder="Username">
    <input type="password" name="pass" class="form-control login-check" id="login-pass" placeholder="Password">
</div>

<div id="login-error" class="alert alert-danger"></div> 

以及jQuery

$(document).ready(function(){
    $("#login-form").prop("disabled",true);
    $("#login-error").removeClass("alert alert-danger");
    var name_min_length = 2;
    var pass_min_length = 5 ;

$(".login-contents").children('input').each(function(){
    $(".login-check").keyup(function(){
        var name = $("#login-name").val();
        name = jQuery.trim(name).length;
        var name_length = length_check(name,name_min_length);
        console.log(name_length);

        var pass = $("#login-pass").val();
        pass = jQuery.trim(pass).length;
        var pass_length = length_check(pass,pass_min_length);
        console.log(pass_length);
    });
});


function length_check(value,number){
    if (value < number) {
        $("#login-error").addClass("alert alert-danger").html("Minimum length");
    }
    else{
        $("#login-error").removeClass("alert alert-danger").html("");
        return true ;
    }
}
});

有什么建议我做错了吗？

- Amir Hossain

---

您将disabled属性设置为true。禁用的表单和输入元素不会被验证。 - user3154108

FYI：在这种情况下，您不需要循环输入！ - Dhaval Marthak

如果所有必填字段都符合要求，我将移除prop禁用。让我检查一下@Dhaval。 - Amir Hossain

Answer 1

你只需要像下面这样改变你的逻辑，并使用更少的代码：

在这种情况下，不需要使用.each循环，可以通过使用类选择器.login-check来访问this（触发keyup事件的当前元素）！

$(".login-check").keyup(function(){
        var name = $(this).val();
        var elemType = $(this).attr('name')
        name = jQuery.trim(name).length;
        var length = length_check(name, elemType == 'name' ? name_min_length : pass_min_length); // if element is name length will be 2 otherwise 5 for pass
        console.log(length);
    });

Demo

- Dhaval Marthak

Answer 2

首先要知道的是，您不必循环输入来注册事件，类选择器会为您完成这项工作，并且您可以在单个函数中处理length_check。请尝试以下内容。

//$(".login-contents").children('input').each(function(){
$(".login-check").keyup(function(){
    var value = trim(this.value).length;
    if(this.name == "name"){
      var result = length_check(value,name_min_length); 
    } else(this.name == "pass") {
       var result = length_check(value,pass_min_length); 
    }
    console.log(result);

});
//});

- bipen

Answer 3

这是因为您在显示名称和密码字段的错误时使用了相同的div和代码。而且密码字段是最后检查的，所以无论名称字段具有什么值，它都将始终显示无错误。以下是可行的代码：

$(document).ready(function() {
  $("#login-form").prop("disabled", true);
  $("#login-error").removeClass("alert alert-danger");
  var name_min_length = 2;
  var pass_min_length = 5;

  $(".login-contents").children('input').each(function() {
    $(".login-check").keyup(function() {
      var name = $("#login-name").val();
      name = jQuery.trim(name).length;
      var name_length_ok = length_check(name, name_min_length);
      console.log(name_length_ok);

      var pass = $("#login-pass").val();
      pass = jQuery.trim(pass).length;
      var pass_length_ok = length_check(pass, pass_min_length);
      console.log(pass_length_ok);
      
      toggle_error(!name_length_ok || !pass_length_ok);
    });
  });

  function length_check(value, number) {
    return value >= number;
  }
  
  function toggle_error(toggle) {
    if (toggle) {
      $("#login-error").addClass("alert alert-danger").html("Minimum length");
    } else {
      $("#login-error").removeClass("alert alert-danger").html("");
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="login-contents">
    <input type="text" name="name" class="form-control login-check" id="login-name" placeholder="Username">
    <input type="password" name="pass" class="form-control login-check" id="login-pass" placeholder="Password">
</div>

<div id="login-error" class="alert alert-danger"></div>

- Jan.J