IE 的 jQuery Validate 插件和 HTML5 Placeholder 插件问题答案

【问题标题】：jQuery Validate plugin and HTML5 Placeholder plugin issues with IEIE 的 jQuery Validate 插件和 HTML5 Placeholder 插件问题
【发布时间】：2013-07-24 12:11:50
【问题描述】：

我在使用 Jquery 验证和 html5 占位符时遇到问题。它在 chrome 和 FF 中运行良好，但 IE 9 及以下版本有问题。我只有在我先点击提交时才看到问题。

在文本字段中键入时，每个必填字段和占位符文本都不会消失

http://screencast.com/t/R0hqbXKm

这是我在标题中的代码

<script type="text/javascript">

$(document).ready(function () {

//Start code

// end code

// Updated

    $('#form339').validate({ // initialize the plugin
        rules: {
            firstName: {
                required: true
            },
            lastName: {
                required: true
            },
            Company: {
                required: true
            },
            EmailAddress: {
                required: true,
                email: true
            }
        }
    });

});

</script>

<script src="/js/microsite/html5placeholder.jquery.js"></script>

<script>
    $(function(){
        $(':input[placeholder]').placeholder();
    });
</script>

正文中的代码

<fm action="#" method="post" name="f1">
    <input name="elqFormName" type="hidden" value="####" />
    <input name="elqSiteId" type="hidden" value="1363" />
    <input name="elqCampaignId" type="hidden" />
    <input name="sfdc_campaign" type="hidden" value="701D0000000auNz" />
    <input name="lead_request" type="hidden" value="000" />
    <input name="lead_source" type="hidden" value="2013-Rebrand" />
    <input name="Salutation1" placeholder="*Prefix" type="text" />
    <input name="firstName" placeholder="*First Name" type="text" />
    <input name="lastName" placeholder="*Last Name" type="text" />
    <input name="EmailAddress" placeholder="*Email Address" type="text" />
    <input name="Company" placeholder="*Company" type="text" />
    <input name="HQ_State1" placeholder="HQ State/Province" type="text" />
    <!--<input type="text" placeholder="Phone Number" name="phone">-->
    <br />
    <select class="drop1" name="country">
          <option selected="selected" value="">Country</option>
          <option value="Afghanistan">Afghanistan</option>
          <option value="United States">United States</option>
          <option value="CA">CA</option></select>
          <!--<div class="requiredtxt">* Required fields</div>-->
    <input alt="SUBMIT!" border="0" class="submit_style" height="29" src="/images/general/Submit2.png" type="image" width="252" />
    &nbsp;
</form>

我该如何解决这个问题

【问题讨论】：

以后，请以我们易于阅读的格式发布您的 HTML。一个没有换行符的长字符串是不可接受的。
由于您的问题很可能与.placeholder() 有关，请提供有关此插件的信息。
<fm ... 应该是什么？你的意思是<form ...？您还将.validate() 附加到$('#form339')，但在您的HTML 中没有id="form339"。请修复您的 OP，以便我们提供帮助。

标签： jquery jquery-validate placeholder

【解决方案1】：

您的 javascript 对象中有多余的逗号。

firstName: {
    required: true,  // <--- remove comma
},

【讨论】：

对于 IE 以外的任何浏览器都可以。
更新到这个 $('#form339').validate({ // 初始化插件规则：{ firstName: { required: true }, lastName: { required: true }, Company: { required : true }, EmailAddress: { required: true, email: true } } }); });
额外的逗号问题已在 IE8 中修复，但最好将其删除
即使这会导致 IE6/7 出现错误，但还是被否决了？掌心
我不确定这是否值得投反对票，但由于 OP 在 IE 8 和 9 中也存在问题，因此这不能解决他的问题。