Validation only applies to first email input

Question

I'm using the jQuery Validate plugin to make sure valid email addresses are entered on this page.

My problem is that this code only validates the first input that has type="email".

Is there a workaround for this so that all of them are validated? It certainly doesn't seem to be the case in the plugin's 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

The fact that you're using an id as your selector might be causing the issue. Instead of $('#form') try to use $('.form-inline') (the class all your forms seem to be sharing)

EDIT:

Ok so I looked pretty deep into it and here is what you should so.

$(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
        });
      });
  });

I think you should be careful with your naming convention though. Like try to call your error containers something more meaningful like "error-console"

See how instead of calling .validate() on one specific element, you have to iterate through all of them using a .each() loop.

Also, jQuery Validator use the name attribute as a convention when declaring rule...so if you want to use a class you need to call that .rules("add", {}) in order to make it work

I hope this helped :)

ADDITIONAL EDIT:

Noticed your last form doesn't get validated .. it's because you have your last button set as type="button" instead of type="submit"

Answer 2

You cannot have duplicate id since id must be unique, so the solution is to replace the duplicated id by using class and it should work.