Question

我正在尝试使用此插件：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 />

我只是想验证用户名＆amp;先发邮件。然后从那里拿走它。

对于我的生活，我无法弄清楚如何指定使用此插件的语法和规则。

帮助！

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：当我清除数据的登录字段并按提交时，它将不会提交。不确定这是否与validate（）函数实际工作有关。但我看不到弹出的消息或类似的东西。

Edit3：似乎问题可能是ID与＆之间的脱节。名称字段的名称不同。但是，Rails会为两个字段分配名称和ID - 因此不确定如何解决此问题。

Edit4：我找到了解决方案。我根据所选答案将其添加到评论中。

Answer 1

我认为是因为表单中“name”属性的值（输入标记）与jquery validate选项不匹配

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

编辑：看看这个问题，我认为他和你有同样的问题jquery.validate in cakePHP

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来整理东西

<style>
#username_error{
   //a little something something
}
</style>

或者您随时可以查看documentation进行进一步修改

Answer 2

试试这个：

$('#user_new').validate({
    rules: {
        user_l_name: "required",
        user_email: {
            required: true,
            email: true
        }
    },
    messages: {
        user_l_name: "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"
        }
    }
})

请确保您在规则和按摩中使用的变量与输入ID和名称相同。我想说的是你的输入ID和名称必须相同才能使其正常工作。

我有同样的问题，如果这不起作用，请告诉我，以便我可以进一步协助。

快乐编码!!!!

Answer 3

不完全确定为什么以上不能自己工作。也许其他人可以发现它...但同时请看一下docs中的调试选项。启用此选项后会得到什么？

Answer 4

请检查此网站http://bassistance.de/jquery-plugins/jquery-plugin-validation。他们有几个关于JQuery验证的例子。

希望它有所帮助......

快乐编码!!!

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

4 个答案: