修改

Question

在我的情况下，我有问题，我试图检查输入是否清空它应该放入＆＃34; has-error＆＃34;风格，但它没有检查..我错过了什么？

＆＃13;

jQuery(document).ready(function($) {
  jQuery("#submit").click(function() {
    var username = jQuery("#username").val();
    var password = jQuery("#password").val();
    jQuery('#username, #password').removeClass("has_error");
    if (username === '') {
      jQuery('#username').parent().find('input').addClass("has_error");
    } else {
      jQuery('#username').parent().find('input').removeClass("has_error");
    }
    
    if (password === '') {
      jQuery('#password').parent().find('input').addClass("has_error");
    } else {
      jQuery('#password').parent().find('input').removeClass("has_error");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="navigation.html" method="post" id="query-form" class="form-signin">
  <input type="text" name="username" class="form-control" id="username" placeholder="Username">
  <input type="password" name="password" class="form-control" id="password" placeholder="Password">
  <button type="submit" class="btn btn-lg btn-primary btn-block" id="submit">
    Prisijungti
  </button>
</form>

＆＃13;

Answer 1

这看起来是正确的，但是您尝试将该类应用于父输入，该输入来自给定的代码并不存在。您似乎应删除以下所有实例：.parent().find('input')

另外，正如showdev所指出的，如果＆＃34;的条件是空的＆＃34;如果符合，那么您需要在表单上return false（不要提交）

＆＃13;

jQuery(document).ready(function($) {
  jQuery("#submit").click(function() {
    var username = jQuery("#username").val();
    var password = jQuery("#password").val();
    jQuery('#username, #password').removeClass("has_error");
    if (username === '') {
      jQuery('#username').addClass("has_error");
      return false;
    } else {
      jQuery('#username').removeClass("has_error");
    }
    if (password === '') {
      jQuery('#password').addClass("has_error");
      return false;
    } else {
      jQuery('#password').removeClass("has_error");
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="navigation.html" method="post" id="query-form" class="form-signin">
  <input type="text" name="username" class="form-control" id="username"     placeholder="Username">
  <input type="password" name="password" class="form-control" id="password" placeholder="Password">
  <button type="submit" class="btn btn-lg btn-primary btn-block" id="submit">
    Prisijungti
  </button>
</form>

＆＃13;

Answer 2

jQuery("#submit").click(function(e) {
    e.preventDefault();
    var username = jQuery("#username").val();
    var password = jQuery("#password").val();

    //rest of code

    $('#query-form').submit(); // once checks complete
});

Answer 3

这可以简化，因为你只是检查空。注意：您可以添加required属性。但无论如何，请检查一下。

修改

Demo

$(function() {
    $("#submit").click(function() {
        var $inputs = $(this).siblings('input'),
            isValid = true;
        $inputs.each(function() { 
          var hasError = !$(this)[0].value.length;
          isValid = isValid && !hasError;
          $(this).toggleClass('has_error', hasError);
        });

        return isValid;
    });
});

使用jQuery检查输入

3 个答案:

修改

Demo