如何在jQuery中进行客户端表单验证? [英] How do I do client-side form validation in jQuery?
问题描述
我正在尝试使用此插件: http://docs.jquery.com/Plugins/Validation
#user_new是表单的ID,这是我的代码的样子:
$('#user_new').validate({
rules: {
user[username]: "required",
user[email]: {
required: true,
email: true
}
},
messages: {
user[username]: "Please specify your name",
user[email]: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
})
这些是页面呈现时(由Rails生成的)我的输入字段的外观:
<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br />
<input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br />
<input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br />
<input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br />
我只是在尝试验证用户名&首先发送电子邮件.然后从那里拿走.
在我生命中,我不知道如何指定使用此插件的语法和规则.
帮助!
Edit1:这是表单标记的HTML输出:
<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post">
关于调试的问题,当我这样包含它时:
$('#user_new').validate({
debug: true,
rules: {
user_username: "required",
user_email: {
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name",
user_email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
我在JS控制台中什么也没看到.
Edit2:当我清除数据的登录字段并按Submit时,它将不会提交.不知道这是否与validate()函数实际起作用有关.但是我看不到任何弹出消息或类似的消息.
Edit3:看来问题可能出在ID&名称字段的名称不同.但是,Rails会将名称和ID分配给两个字段-因此不确定如何解决此问题.
Edit4:我找到了解决方案.我将其添加到所选答案下的评论中.
我认为这是因为表单(输入标签)中的名称"属性值与jquery验证选项不匹配
$('#user_new').validate({
debug: true,
rules: {
user_username: "required", // should be: "user[username]"
user_email: { // should be: "user[email]"
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name", // should be: "user[username]"
user_email: { // should be: "user[email]"
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
看看这个问题,我认为他和您一样有同样的问题 添加此代码: 然后应用一些CSS整理一下 或者您可以随时查看文档进行进一步的修改$('#user_new').validate({
debug: true,
rules: {
//rules
},
messages: {
//messages
},
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next());//if its a radio button
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );//if its a radio button
else
error.appendTo( element.parent().next() );
},//these lines of codes basically telling the jquery.validate plug-in to look for an element after
});
<style>
#username_error{
//a little something something
}
</style>
I am trying to use this plugin: http://docs.jquery.com/Plugins/Validation
Where #user_new is the id for my form, this is what my code looks like:
$('#user_new').validate({
rules: {
user[username]: "required",
user[email]: {
required: true,
email: true
}
},
messages: {
user[username]: "Please specify your name",
user[email]: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
})
Where these are how my input fields look when the page is rendered (generated by Rails):
<input class="clearField curved" id="user_f_name" name="user[f_name]" size="30" type="text" value="First Name" /><br />
<input class="clearField curved" id="user_l_name" name="user[l_name]" size="30" type="text" value="Last Name" /><br />
<input class="clearField curved" id="user_username" name="user[username]" size="30" type="text" value="Username" /><br />
<input class="clearField curved" id="user_password" name="user[password]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" value="Password" /><br />
<input class="clearField curved" id="user_email" name="user[email]" size="30" type="text" value="Email Address" /><br />
I was just trying to validate username & email first. Then take it from there.
For the life of me, I can't figure out how to specify the syntax and the rules for working with this plugin.
Help!
Edit1: Here is the HTML output for the form tag:
<form accept-charset="UTF-8" action="/users/login" class="user_new" id="user_new" method="post">
As for the question about debug, when I include it like so:
$('#user_new').validate({
debug: true,
rules: {
user_username: "required",
user_email: {
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name",
user_email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
I see nothing in my JS console.
Edit2: When I clear my login fields of data and press submit, it won't submit. Not sure if this is something to do with the validate() function actually working. But I see no messages pop-up or anything like that.
Edit3: It seems that the problem might be a disconnect between the ID & name fields being named differently. However, Rails assigns the name and ID to both fields - so not sure how to fix this.
Edit4: I found a solution. I added it to a comment under the chosen answer.
i think its because the value of the "name" attribute in the form (the input tag) does not match the jquery validate option
$('#user_new').validate({
debug: true,
rules: {
user_username: "required", // should be: "user[username]"
user_email: { // should be: "user[email]"
required: true,
email: true
}
},
messages: {
user_username: "Please specify your name", // should be: "user[username]"
user_email: { // should be: "user[email]"
required: "We need your email address to contact you",
email: "Your email address must be in the format of name@domain.com"
}
}
});
Edit: take a look at this question, i think he has the same problem as you are jquery.validate in cakePHP
Edit2: to edit the way it display, put a container right after your input tag, let say
<div id="username_error"></div>//for username error message
add this codes:
$('#user_new').validate({
debug: true,
rules: {
//rules
},
messages: {
//messages
},
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next());//if its a radio button
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );//if its a radio button
else
error.appendTo( element.parent().next() );
},//these lines of codes basically telling the jquery.validate plug-in to look for an element after
});
and then apply some css to tidy things up
<style>
#username_error{
//a little something something
}
</style>
or you can always check the documentation for further modifications
这篇关于如何在jQuery中进行客户端表单验证?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!