Question

我正在使用查询验证来验证用户是否在向我发送电子邮件之前填写了所有文本字段。这是我的表单HTML：

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
            <input type="text" class="required" placeholder="Your Name" /> <br />
            <input type="text" class="required" placeholder="Your Email" /> <br />
            <input type="text" class="required" placeholder="Subject" /><br />
            <textarea rows="10" class="required" ></textarea><br />
            <input type="submit" class="btn btn-primary required" />
</form>

我的jQuery：

$(function() {
    $('#emailForm').validate();
});

然后我访问page并提交表单而不输入任何文本，只有第一个文本框会附加错误消息。如果填写了第一个文本框，表单将被提交而不会出现任何问题。有人可以帮我吗？感谢

Answer 1

每个输入必须包含name属性，否则jQuery Validate插件将无法正常运行。

否则，在每个元素中使用class="required"没有任何问题。

请改为尝试：

<强> HTML ：

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
    <input type="text" name="yourname" class="required" placeholder="Your Name" /> <br />
    <input type="text" name="youremail" class="required" placeholder="Your Email" /> <br />
    <input type="text" name="subject" class="required" placeholder="Subject" /><br />
    <textarea rows="10" name="description" class="required" ></textarea><br />
    <input type="submit" class="btn btn-primary required" />
</form>

<强>的jQuery ：

$(function() {
    $('#emailForm').validate();
});

工作演示：http://jsfiddle.net/xSwfD/

Answer 2

删除第一个class=required，看看会发生什么？表单现在将在电子邮件中验证。这样做的方法是在html中给出一个唯一的名称。我更喜欢这种方式，因为它为进一步定制提供了更大的灵活性：

<form class="email-form" action="php/email.php" method="POST" id="emailForm"> <br />
    <input type="text" name="name" placeholder="Your Name" /> <br />
    <input type="text" name="email" placeholder="Your Email" /> <br />
    <input type="text" name="subject" placeholder="Subject" /><br />
    <textarea rows="10" class="required small" ></textarea><br />
    <input type="submit" class="btn btn-primary" />
</form>

$(function() {

    $('#emailForm').validate({
           rules: {
                   name: "required",
                   email: "required",
                   subject: "required",
           }
   });

});

使用此功能，您可以使用消息和其他字段获得各种想象力。看到这个好tutorial。

Fiddle我正在玩耍。

在jQuery验证问题上非常困惑

2 个答案: