Internet Explorer使用jQuery验证插件在页面加载时显示电子邮件错误标签

我对jQuery验证插件和Internet Explorer有问题。基本上，“请输入有效的电子邮件地址”错误消息在页面加载时显示，尽管所有验证工作正常，但在用户输入任何数据之前就出现在那里是相当难看的

如果我删除了email类，只是将该字段设为必填字段，那么没有问题，但我希望它能够验证电子邮件地址

我在IE7/8/9中遇到了这个问题

这是我的密码：

//Form Validation
    $(document).ready(function(){
        $("#rsvpForm").validate({
           rules: {
             // simple rule, converted to {required:true}
             attendance: "required",
             firstname_main: "required",
             lastname_main: "required",

             // compound rule
             email: {
               required: true,
               email: true
             },
             total_guests: {
              required: "#attendance:checked"
            },
             firstname_partner: {
              required: function(element) {
                return $("input:radio[name='total_guests']:checked").val() == '2' || $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
              }
            },

             lastname_partner: {
              required: function(element) {
                return $("input:radio[name='total_guests']:checked").val() == '2' || $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
              }
            },
             firstname_child1: {
              required: function(element) {
                return $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
              }
            },
             lastname_child1: {
              required: function(element) {
                return $("input:radio[name='total_guests']:checked").val() == '3' || $("input:radio[name='total_guests']:checked").val() == '4'
              }
            },
             firstname_child2: {
              required: function(element) {
                return $("input:radio[name='total_guests']:checked").val() == '4'
              }
            },
             lastname_child2: {
              required: function(element) {
                return $("input:radio[name='total_guests']:checked").val() == '4'
              }
            },
           }
        });

        jQuery.extend(jQuery.validator.messages, {
            required: 'Required',
        });
      });
// Submit Handler
$(document).ready(function() { 
        $('#rsvpForm').ajaxForm({ 
            target:     '#content', 
            url:        'components/process-form-data.php' 

        }); 
    }); 

以下是我的标题链接：

    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript" src="../javascript.js"></script>

表格HTML：

<form method="post" action="components/process-form-data.php" id="rsvpForm">
            <fieldset>
                <label for="attendance">Will you be attending the wedding? <em>*</em></label>
                <div class="radioBtns">
                <input class="signUp" type="radio" value="Yes" name="attendance" id="attendance" />
                <label class="signUp">Yes</label>

                <input class="signUp" type="radio" value="No" name="attendance" />
                <label class="signUp">No</label>
                </div>
            </fieldset>
            <h2>Main Guest</h2>
            <fieldset>
                <label for="firstname_main" class="standard">First name<em>*</em> :</label>

                <input type="text" name="firstname_main" id="firstname_main" placeholder="First name" />             
            </fieldset>             
            <fieldset>
                <label for="lastname_main" class="standard">Last name<em>*</em> :</label>
                <input type="text" name="lastname_main" id="lastname_main" placeholder="Last name" />
            </fieldset>
            <fieldset>
                <label for="email" class="standard">Email<em>*</em> :</label>
                <input type="text" name="email" id="email" placeholder="Email" />
            </fieldset>
            <div id="guests">   
            <fieldset class="wideField">
                <label for="total_guests">Will you be bringing a partner and/or young children? <em>*</em></label>
                <div class="radioBtns">
                <input class="signUp" type="radio" value="1" name="total_guests" id="total_guests" />
                <label class="signUp">No</label>
                <input class="signUp" type="radio" value="2" name="total_guests" />
                <label class="signUp">Just Partner</label>
                <input class="signUp" type="radio" value="3" name="total_guests" />
                <label class="signUp">Partner + 1 young child</label>
                <input class="signUp" type="radio" value="4" name="total_guests" />
                <label class="signUp">Partner + 2 young children</label>
                </div>
            </fieldset>
            </div>
            <div id="partnerDetails" style="display:none;">
            <h2>Partner Details</h2>
            <fieldset>
                <label for="firstname_partner" class="standard">First name<em>*</em> :</label>

                <input type="text" name="firstname_partner" id="firstname_partner" placeholder="First name" />             
            </fieldset>             
            <fieldset>
                <label for="lastname_partner" class="standard">Last name<em>*</em> :</label>
                <input type="text" name="lastname_partner" id="lastname_partner" placeholder="Last name" />
            </fieldset>
            </div>
            <div id="childDetails" style="display:none;">
            <h2>Child Details</h2>
            <fieldset>
                <label for="firstname_child1" class="standard">First name<em>*</em> :</label>

                <input type="text" name="firstname_child1" id="firstname_child1" placeholder="First name" />             
            </fieldset>             
            <fieldset>
                <label for="lastname_child1" class="standard">Last name<em>*</em> :</label>
                <input type="text" name="lastname_child1" id="lastname_child1" placeholder="Last name" />
            </fieldset>
            </div>
            <div id="secondChildDetails" style="display:none;">
            <fieldset>
                <label for="firstname_child2" class="standard">First name<em>*</em> :</label>

                <input type="text" name="firstname_child2" id="firstname_child2" placeholder="First name" />             
            </fieldset>             
            <fieldset>
                <label for="lastname_child2" class="standard">Last name<em>*</em> :</label>
                <input type="text" name="lastname_child2" id="lastname_child2" placeholder="Last name" />
            </fieldset>
            </div>
            <div id="diet">
            <fieldset class="wideField">
                <label for="dietaryRequirements">Do any of your guests have special dietary requirements :</label>
                <textarea cols="55" rows="8" name="dietaryRequirements" id="dietaryRequirements"></textarea>
            </fieldset>
            </div>
            <input id="submit_btn" input="" type="submit" value="Submit RSVP" class="btn" />            
        </form>

你会参加婚礼吗*
对
不
主宾
姓名*：
姓氏*：
电邮*：
您会带伴侣和/或小孩吗*
不
正义伙伴
伴侣+1名幼儿
合作伙伴+2名幼儿
合作伙伴详细信息
姓名*：
姓氏*：
子详细信息
姓名*：
姓氏*：
姓名*：
姓氏*：
您的客人是否有特殊的饮食要求：

我刚刚在IE8中试用了你的表单，没有问题。如果您在IE7/9的初始页面加载中看到电子邮件字段错误消息，请尝试该插件的早期版本：

---

希望有帮助

谢谢你的回复，但这似乎没有帮助，但我想我已经解决了这个问题

我的页面中还有一些填充IE中占位符文本的代码。当我使用“电子邮件”作为占位符文本时，验证正在启动

<script type="text/javascript">
        /* <![CDATA[ */
        $(function() {
            var input = document.createElement("input");
            if(('placeholder' in input)==false) { 
                $('[placeholder]').focus(function() {
                    var i = $(this);
                    if(i.val() == i.attr('placeholder')) {
                        i.val('').removeClass('placeholder');
                        if(i.hasClass('password')) {
                            i.removeClass('password');
                            this.type='password';
                        }           
                    }
                }).blur(function() {
                    var i = $(this);    
                    if(i.val() == '' || i.val() == i.attr('placeholder')) {
                        if(this.type=='password') {
                            i.addClass('password');
                            this.type='text';
                        }
                        i.addClass('placeholder').val(i.attr('placeholder'));
                    }
                }).blur().parents('form').submit(function() {
                    $(this).find('[placeholder]').each(function() {
                        var i = $(this);
                        if(i.val() == i.attr('placeholder'))
                            i.val('');
                    })
                });
            }
        });
        /* ]]> */
</script>

/*  */

---

关于如何解决这个问题有什么建议吗？

谢谢你的回复，但这似乎没有帮助，但我想我已经解决了这个问题。我的页面中也有一些代码，用于填充IE中的占位符文本。当我使用“电子邮件”作为占位符文本时，验证正在启动。没错，我已经解决了这个问题，现在感觉非常愚蠢。我在验证后得到了占位符代码，这意味着当添加占位符文本时，它会触发实时验证。只需先加载占位符即可。也就是说，将JS放在前面。我刚刚遇到了这个问题，将Modernizer脚本放在validate脚本之上已经解决了这个问题！谢谢：）