Here's a JSFiddle

Question

我正在尝试在一个非常简单的表单上进行一些表单验证。我将有一个名称字段，一个电子邮件字段和一个消息字段。

基本上我想验证名称以检查是否有超过1个字符，我想根据有效的电子邮件格式验证电子邮件，我想验证邮件以检查超过1个字符。

我还希望在关注下一个字段而不是提交后立即将错误类应用于字段，但我似乎无法使其工作并且我的错误/成功类没有被应用无论是。谁能看一看，让我知道我错了什么？

HTML：

<form id="contactform" name="contact" action="{{ contents.form_submissions.api.create }}" method="post">
 <p>
  <label for="name">Name:</label>
  <input type="text" id=name name="content[name]" placeholder="Name" required tabindex="1" />
 </p>
 <p>
  <label for="email">Email:</label>
  <input type="text" id=email name="content[email]" placeholder="example@domain.com" required tabindex="2" />
 </p>
 <p>
  <label for="message">Message:</label>
  <textarea name="content[message]" id="message" tabindex="3" required></textarea>
 </p>
 <p class="action">
  <input name="submit" type="submit" id="submit" tabindex="4" value="Send Message" />
 </p>
</form>

使用Javascript：

$(document).ready(function() {
    var validator = $("#contactform").validate({
        errorClass: 'input-error',
        validClass: 'input-valid',
        rules: {
            name: "required",
            email: "required",
            message: {
                required: true,
                minlength: 1
            }
        },
        messages: {
            name: "Enter your name",
            email: "Enter your email",
            message: {
                required: "Enter a message",
                minlength: 1
            }
        }
    });
});

Here's a JSFiddle

Answer 1

您的姓名属性必须与规则名称匹配（即，如果您有name="content[name]"，则规则必须为'content[name]': "required"
除非您需要HTML5验证而不是jQuery验证，否则不要在输入元素中使用required属性。
随时致电$('#contactform').valid()以触发验证

工作示例：http://jsfiddle.net/ryleyb/kv8T8/8/

jQuery.validate立即验证字段而不是提交？

Here's a JSFiddle

1 个答案: