如何在jQuery中进行客户端表单验证?

本文介绍了如何在jQuery中进行客户端表单验证?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在尝试使用此插件: docs.jquery/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" } } })

这些是页面呈现时(由Rails生成的)我的输入字段的外观:

我只是在尝试验证用户名&首先发送电子邮件.然后从那里拿走.

在我生命中，我不知道如何指定使用此插件的语法和规则.

帮助！

Edit1:这是表单标记的HTML输出:

关于调试的问题，当我这样包含它时:

$('#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" } } });

我在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" } } });

看看这个问题，我认为他和您一样有同样的问题在cakePHP中进行jquery.validate

Edit2:要修改其显示方式，请在输入标签之后放置一个容器，让我们说

<div id="username_error"></div>//for username error message

添加此代码:

$('#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 });

然后应用一些CSS整理一下

或者您可以随时查看文档进行进一步的修改 >

I am trying to use this plugin: docs.jquery/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" } } })

Where these are how my input fields look when the page is rendered (generated by Rails):

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:

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" } } });

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" } } });

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

or you can always check the documentation for further modifications

更多推荐

如何在jQuery中进行客户端表单验证?