Question

我遇到了Jquery validate和html5占位符的问题。它在chrome和FF中效果很好但IE 9及以下版本我有一个问题。我在第一次点击提交时才会看到问题。

在文本字段中键入

时，所需的每个字段和占位符文本都不会消失

这是标题

中的代码

<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>

如何解决此问题

Answer 1

您的javascript对象中有额外的逗号。

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

jQuery验证IE的插件和HTML5占位符插件问题

1 个答案: