Question

我目前正在网站上工作，此特定部分要求用户在表单中输入他们的详细信息。我想要实现的目标如下：

如果用户点击提交按钮并且任何字段为空，我想要一个span元素，最初设置为CSS display none，以显示尚未填充的每个相应输入字段。

然而，当我点击按钮时似乎没有发生任何事情。当我进入控制台时，它不会显示任何错误消息。

有人可以帮忙吗？非常感谢。

HTML：

<!-- START OF 'YOUR DETAILS' FORM-->

<section>


    <div class="container">

        <h3>Step 3: Your Details</h3>

        <!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->

        <div class="row chosenmembership">

        <div class="col-md-12 text-center" id="yourdetails">

            <form action="" method="">

                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" placeholder="Email Address" id="email" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
                </div>

                    <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" placeholder="Full Name" id="name" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
                    </div>


                    <div class="form-group">
                    <label for="number">Contact Number:</label>
                    <input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="postcode">Post Code:</label>
                    <input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="dob">Date of Birth:</label>
                    <input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
                    </div>

                            </form>

                    <div class="form-group">
                    <input type="submit" id="submit" value="CONTINUE">
                    </div>




        </div>

    </div>

    </div>


</section>

<!-- END OF YOUR DETAILS FORM -->

JS / JQUERY：

$("#submit").click(function(){
        var $formValues = $(".your-details");
        var $warning = $(".warnings");
        $($formValues).each(function(index){
            if ($(this).val("")){
            $($warning[index]).css("display","block");
            }
        })
    })

Answer 1

运行此代码$($formValues).each(function(index){if ($(this).val("")){ console.log（this）并查看函数运行的上下文时，问题是每次编写函数声明时都会创建一个新的this上下文因此之前的this将丢失。

Answer 2

你的选择器有点多余，保持表单不提交，并在任何空的时候显示警告似乎是你的意图。

$("#submit").click(function(e) {
  $(".your-details").each(function(index) {
    if ($(this).val() =="") {
      e.preventDefault();// no submit if not filled out
      $(this).next('.warning').css("display", "block");// next sibling show
    }
  });
});

考虑一下这一点并相信你可以处理表单提交

$("form").on('submit', function(e) {
  $(this).find('.warning').css("display", "none");// hide in case they fix input values
  $(this).find(".your-details").each(function(index) {
    if ($(this).val() =="") {
      $(this).next('.warning').css("display", "block");// next sibling show
    }
  });
});

或者您可以使用过滤器。

$("form").on('submit', function(e) {
  $(this).find('.warning').css("display", "none");// hide in case they fix input values
  var emptyInputs = $(this).find(".your-details")
    .filter(function() {
        return ($(this).val() =="");
    });
  if(!!emptyInputs) {
     e.preventDefault();
     emptyInputs.next('.warning').css("display", "block"); 
   }
});

Answer 3

除了拼写错误之外，还有一个问题，你实际上是设定价值，而不是检查它：if ($(this).val(""))如果你改变它，并修复拼写错误，这样的事情应该有效。简化后，您的代码可能如下所示：

$("#submit").click(function(){
        var $formValues = $(".your-details");

        $($formValues).each(function(index){
            if ($(this).val()==''){

           $(".warning").eq(index).css("display","block");
            }
            else {
             $(".warning").eq(index).css("display","none");
            }
        })
    })

演示：

＆＃13;

$("#submit").click(function(){
        var $formValues = $(".your-details");
        
        $($formValues).each(function(index){
            if ($(this).val()==''){
         
           $(".warning").eq(index).css("display","block");
            }
            else {
             $(".warning").eq(index).css("display","none");
            }
        })
    })

＆＃13;

.warning {
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- START OF 'YOUR DETAILS' FORM-->

<section>


    <div class="container">

        <h3>Step 3: Your Details</h3>

        <!-- SLIDE-IN DIV TO REPRESENT DAY PASS -->

        <div class="row chosenmembership">

        <div class="col-md-12 text-center" id="yourdetails">

            <form action="" method="">

                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="email" placeholder="Email Address" id="email" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Email is required!</span>
                </div>

                    <div class="form-group">
                    <label for="name">Name:</label>
                    <input type="text" placeholder="Full Name" id="name" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Name is required!</span>
                    </div>


                    <div class="form-group">
                    <label for="number">Contact Number:</label>
                    <input type="tel" placeholder="Contact Number" id="number" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Contact Number is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="postcode">Post Code:</label>
                    <input type="text" placeholder="Post Code" id="postcode" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
Post Code is required!</span>
                    </div>

                    <div class="form-group">
                    <label for="dob">Date of Birth:</label>
                    <input type="tel" placeholder="DD/MM/YYYY" id="dob" class="form-control your-details">
                    <span class="warning"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
DOB is required!</span>
                    </div>

                            </form>

                    <div class="form-group">
                    <input type="submit" id="submit" value="CONTINUE">
                    </div>




        </div>

    </div>

    </div>


</section>

<!-- END OF YOUR DETAILS FORM -->

＆＃13;

P.S。你可以保留你的$($warning[index])变量，但是如果字段不为空，你应该隐藏警告，否则阻止警告。

jquery每个方法都没有按预期工作

3 个答案: