Question

我正在尝试使用jQuery验证表单。我正在选择所有包含class="required"并使用.each()函数的表单字段来检查该字段是否为空。如果它是空的，我会显示相对于该字段定位的隐藏div。

由于以下代码失败，显然有些错误：

$('#application').submit(function(){
var requiredFields = $('.required').val();
requiredFields.each(function(){
    if (requiredFields == ''){
        position = requiredFields.position();
        width = requiredFields.outerWidth();
        $("#error-wrapper-mail").css({
            visibility: "visible",
            top: (pos.top - 8) + "px",
            left: (pos.left + width + 25) + "px"
        }).hide().fadeIn("slow").delay(2700).fadeOut("slow");
        requiredFields.addCLass("not-valid").focus().delay(3500).queue(function(){
            $(this).removeClass("not-valid");
        });
        return false;
    }
}); });

如果我按ID选择输入字段，则其余代码可以正常工作。

标记：

<form role="form" id="application" action="add-customer.php" method="post" enctype="multipart/form-data">
    <label for="Input-firstname">First name<span class="redstar"> * </span></label>
    <input type="text" class="form-control required" id="Input-firstname" name="firstname" placeholder="Your first name">
    <br />
    <label for="Input-lastname">Last name<span class="redstar"> * </span></label>
    <input type="text" class="form-control required" id="Input-lastname" name="lastname" placeholder="Your last name">
    <br />
    <label for="InputPass">Password<span class="redstar"> * </span></label>
    <input type="password" class="form-control  required" id="InputPass" name="pass" placeholder="Choose your password">
    <span class="help-block">Please create a password more than 6 symbols long, including uppercase letters, lowercase letters and digits.</span>
    ...
</form>

我是jQuery的新手，如果有人能指出我正确的方向，我会感激不尽

编辑：这是小提琴 - http://jsfiddle.net/7yLmq/

Answer 1

尝试在每个$('.required')之间循环：

$('.required').each(function(){
   var requiredFields = $(this).val();
   // Your Code
});

Answer 2

您的代码也可以通过使用其他一些jQuery方法来清理。

$('#application').submit(function(){
  $('.required').each(function(){
    if($(this).val() == ''){
      $(this).closest('.help-block').fadeIn();
      return false;
    }
  });
});

这假设您每个help-block输入字段将有一个required。你可以很容易地调整它以将help-block移动到当前的required字段，但除非你想要动态加载这些消息，否则我看不到这一点。

用jquery .each（）函数显示隐藏的div

2 个答案: