我正在尝试对一个非常简单的表单进行一些表单验证。我将有一个Name字段、一个Email字段和一个Message字段。
基本上,我想验证名称,以检查是否有超过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
}
}
});
});
这是一个JSFiddle
-
您的名称属性必须与规则名称匹配(即,如果您有
name="content[name]"
,则您的规则必须是'content[name]': "required"
-
不要在输入元素中使用
required
属性,除非您想要HTML5验证而不是jQuery验证。 -
随时调用
$('#contactform').valid()
触发验证
工作示例:http://jsfiddle.net/ryleyb/kv8T8/8/