Question

我使用jQuery Validate插件确保在this page上输入有效的电子邮件地址。

我的问题是此代码仅验证具有input的第一个 type="email"。

是否有针对此的解决方法以便所有这些都经过验证？在插件的demo中，情况似乎并非如此。

    <script>
    $(document).ready(function()
    {
        $('.form-inline').validate(
        {
            rules:
            {
                email:
                {
                    required: true,
                    email: true
                }
            },
            errorLabelContainer: ".hidden",
            errorPlacement: function(error, element)
            {
                error.insertAfter(element);
            }
        });
    });
    </script>

<!-- Get notified modal 1 -->
<div class="modal fade" id="getNotifiedModal1" tabindex="-1" role="dialog" aria-labelledby="getNotifiedLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="getNotifiedModal1Label">Sorry, this feature is unavailable in the demo version.</h4>
            </div>
            <div class="modal-body">
                <p id="p">But why not get notified when the full version of Shopaholic launches?</p>
                <form role="form" class="form-inline" method="POST">
                        <input type="email" name="feature_unavailable_email" class="inputEmail form-control" placeholder="Enter email">
                        <button type="submit" class="btn btn-primary">Notify me</button>
                </form>
                <div type="hidden" class="hidden" class="p"></div>
            </div>
        </div>
    </div>
</div>

<!-- Get notified modal 2 -->
<div class="modal fade" id="getNotifiedModal2" tabindex="-1" role="dialog" aria-labelledby="getNotifiedLabel2" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="getNotifiedModal2">Get notified when Shopaholic launches!</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-inline" method="POST">
                        <input type="email" name="banner_email" class="inputEmail form-control" placeholder="Enter email">
                        <button type="submit" class="btn btn-primary">Notify me</button>
                </form>
                <div type="hidden" class="hidden" class="p"></div>
            </div>    
        </div>
    </div>
</div>

<!-- About modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="aboutModal">About Shopaholic</h4>
            </div>
            <div class="modal-body">
                <p>Shopaholic turns your new tab page into a feed of sale items from your favourite clothes stores.</p>
                <p>Simply pick which stores you want to add to your feed, filtering by country and gender, and you're good to go!</p>
                <p id="p">Enter your email address below to get notified when Shopaholic launches.</p>
                <form role="form" class="form-inline" method="POST">
                        <input type="email" name="about_email" class="inputEmail form-control" placeholder="Enter email">
                        <button type="button" class="btn btn-primary">Notify me</button>
                </form>
                <div type="hidden" class="hidden" class="p"></div>
            </div>    
        </div>
    </div>
</div>

Answer 1

您使用ID作为选择器这一事实可能会导致问题。而不是$('#form')尝试使用$('.form-inline')（所有表单似乎都在分享的类）

编辑：

好的，所以我看起来非常深入，这就是你应该这样做的。

$(document).ready(function()
  {
      $('.form-inline').each(function () {
        $(this).validate(
        {
            errorPlacement: function(error, element)
            {
              element.parent("form").next("div.p").html(error);
            }
        });
        $(this).children("input[type=email]").rules("add", {
          required: true,
          email: true
        });
      });
  });

我认为你应该小心你的命名惯例。就像尝试调用你的错误容器更有意义的东西，如＆＃34; error-console＆＃34;

了解如何在一个特定元素上调用.validate()，而不是使用.each()循环遍历所有元素。

此外，jQuery Validator在声明规则时使用name属性作为约定...所以如果你想使用一个类，你需要调用.rules("add", {})来使其工作

我希望这有助于：）

其他编辑：

注意到您的上一个表单没有经过验证..因为您将最后一个按钮设置为type="button"而不是type="submit"

Answer 2

您不能拥有重复id，因为id必须是唯一的，因此解决方案是使用类替换重复的id，它应该可以正常工作。

验证仅适用于第一封电子邮件输入

2 个答案: