Form获胜'没有ID主联系表格无法验证

Form won't validate without ID main-contact form

本文关键字:表格 联系 验证 ID 获胜 没有 Form      更新时间:2023-09-26

我有一个奇怪的问题。我有一个表格,它是邮件黑猩猩的订阅表格。如果我没有验证,表格会非常有效(当它说"请填写"或"请在电子邮件中包含@"时)

如果我有一个ID id="main-contact-form",它也会起作用。然而,mailchimp成功/失败回复会在一个新的选项卡中打开。问题是我不希望它转到另一个选项卡,我希望它显示在特别标记的div中。如果我没有主联系人表单ID,但没有我想要的验证,这会起作用的。

这是表格:

        <form name="mc-embedded-subscribe-form"
              action="//leilamasson.us7.list-manage.com/subscribe/post?u=0178d0b7b81eec71fd9e2ee9b&amp;id=63fbfa0062"
              method="post" id="mc-embedded-subscribe-form main-contact-form"
              target="_blank">
            <div class="form-group">
                <input type="text" name="FNAME" class="form-control" required="required"
                       placeholder="Name">
            </div>
            <div class="form-group">
                <input type="text" name="LNAME" class="form-control" required="required"
                       placeholder="Last Name">
            </div>
            <div class="form-group">
                <input type="email" name="EMAIL" class="form-control" required="required"
                       placeholder="Email Adress">
            </div>
            <div id="form-group">
                <div class="response" id="mce-error-response" style="display:none"></div>
                <div class="response" id="mce-success-response" style="display:none"></div>
            </div>
            <div class="form-group">
                <button type="submit" name="subscribe" class="btn btn-primary pull-right">Subscribe</button>
            </div>
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text"
                                                                                      name="b_0178d0b7b81eec71fd9e2ee9b_63fbfa0062"
                                                                                      tabindex="-1" value="">
            </div>
        </form>

下面是一个我想要的无需验证的表单示例:

<form action="//leilamasson.us7.list-manage.com/subscribe/post?u=0178d0b7b81eec71fd9e2ee9b&amp;id=63fbfa0062"
      method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form">
    <div class="form-group">
        <input type="email" name="EMAIL" class="form-control" required="required"
               placeholder="Email Adress">
    </div>
    <div class="form-group">
        <button type="submit" name="subscribe" class="btn btn-primary pull-right">Subscribe</button>
    </div>
    <div id="form-group">
        <div class="response" id="mce-error-response" style="display:none"></div>
        <div class="response" id="mce-success-response" style="display:none"></div>
    </div>
</form>

注意:底部表单没有ID主联系人表单,这不允许它进行验证,顶部表单有ID主联系人表格,这迫使它在新的选项卡中打开。

这个问题可以在社交版块下的leila.moussaieffe.info上看到。

id中不能有空格-这将有效地分割部分并导致问题:

...id="mc-embedded-subscribe-form main-contact-form"...

应该类似于(添加下划线):

...id="mc-embedded-subscribe-form_main-contact-form"...

此外,您还应该为输入设置标签,其中for="xyz",xyz是输入的id。这允许屏幕阅读器将标签绑定到特定的输入。

请注意,用于错误的div有一个表单组的id,而所有其他div都有一个窗体组的类:

...<div id="form-group">
     <div class="response"...

应该是

...<div class="form-group">
     <div class="response"...

同样作为一个旁白——而不是在屏幕外隐藏一个div并在其中输入文本——为什么不隐藏一个输入:

<input type="hidden" name="b_0178d0b7b81eec71fd9e2ee9b_63fbfa0062" value="" />