Jquery 使用电子邮件验证多个输入答案

【问题标题】：Jquery validate multiple inputs with emailJquery 使用电子邮件验证多个输入
【发布时间】：2013-10-25 23:32:54
【问题描述】：

我有一个表单，我要求用户输入电子邮件地址以发送自动电子邮件。我已将电子邮件输入设置为必需并检查有效电子邮件，但它似乎仅适用于第一个。我在这里做错了什么？

 <form class="validate" method="post" id="formLoc">
        <div data-role="fieldcontain">
            <label for="email-from">from</label>
            <input type="text"   class="required email" id="email-from" placeholder="from" />
        </div>
        <div data-role="fieldcontain">
            <label for="email-to">to</label>
            <input type="text" id="email-to" class="required email"  placeholder="to" />
        </div>
        <div data-role="fieldcontain">
            <label for="email-message">message</label>
            <textarea id="email-message" cols="100" rows="40"></textarea>
        </div>
        <div class="email-sent">
            <h4></h4>
        </div>

        <div class="SendEmailButton">
            <button type="submit" data-role="button" data-icon="forward" data-inline="true"
                data-mini="true" data-theme="c">send</button>
        </div>

    </form>

这里有一个问题：http://jsfiddle.net/bobby5193/8dHg9/544/

【问题讨论】：

它也适用于我的第二个电子邮件字段...
你检查了小提琴并且它有效吗？我正在检查 Chrome，它只触发第一个。会不会和浏览器有关？
问题是，它会显示第二个输入的焦点错误，但即使我将其留空，表单也会被验证。
除了你的方法之外，考虑在你的输入元素上使用the type="email" and required attributes，特别是因为你正在制作一个移动网站。

标签： javascript jquery validation email

【解决方案1】：

将name 属性添加到两个输入字段。

<input type="text" name="email-from" class="required email" id="email-from" placeholder="from" />
<input type="text" name="email-to" id="email-to" class="required email" placeholder="to" />
<textarea name="email-message" id="email-message" cols="100" rows="40" class="required"></textarea>

这是jsFiddle

更新

这是一个更新的 jsFiddle，它在 textarea 上进行了验证。我添加了name 属性和class="required"。

【讨论】：

所以如果他省略了name 属性，验证代码会以某种方式认为两个字段具有相同的（空）名称并且只检查其中一个？
@Blazemonger 这正是我一直以来的看法，但我不想说是或否，因为我不知道确切的原因。不久前我遇到了同样的问题，碰巧弄明白了，所以它一直困扰着我。很抱歉不能给你答案，我也想知道。
顺便说一下，他的 textarea 也需要一个 name 属性，至少如果他想在服务器端处理表单的话。
@Blazemonger 是的，你是对的，我应该从一开始就包含它。我用它更新了答案。感谢您指出这一点。

【解决方案2】：

如果您想获得多个文本框来插入电子邮件，例如

<ul>
  <li>
    <input id="emailcheck" type="text" placeholder="Email" name="ToEmails[0]" required />
    <input id="emailcheck" type="text" placeholder="Email" name="ToEmails[1]" required />
    <input id="emailcheck" type="text" placeholder="Email" name="ToEmails[2]" required />
  </li>
</ul>

现在我们将从文本框中获取所有电子邮件地址。

var email = $('input[name^=ToEmails]');  
console.log(email);

【讨论】：