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

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 /> 

我只是想先验证用户名&电子邮件。然后从那里拿走。

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

帮助！

EDIT1：这里是表单标签的HTML输出：

<form accept-charset="UTF-8" action="https://stackoverflow.com/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安慰。

编辑2：当我清除我的数据登录字段并按提交时，它不会提交。不知道这是否与实际工作的validate（）函数有关。但是我看不到任何消息弹出或类似的东西。

EDIT3：看来这个问题可能是之间的ID &姓名字段被命名不同的脱节。但是，Rails将名称和ID分配给两个字段 - 所以不知道如何解决这个问题。

Edit4：我找到了解决办法。我将它添加到所选答案下的评论中。

Answer 1

我认为它是因为“名”属性的表单值（输入标签）不匹配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" 
     } 
    } 
}); 

编辑：看看这个问题，我想他有同样的问题，你是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

不完全确定为什么上述不工作我自己。也许别人可以发现它......但同时看看文档中的调试选项。当你启用这个选项时你会得到什么？

Answer 3

试试这个：

$('#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 4

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

希望它有帮助...

快乐编码！