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

我正在尝试使用此插件：

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

我在JS控制台中看不到任何东西

Edit2：当我清除登录字段中的数据并按submit时，它不会提交。不确定这是否与验证函数实际工作有关。但我没有看到弹出的消息或类似的东西

Edit3：问题似乎是ID和name字段之间的断开连接被命名为不同的名称。但是，Rails将名称和ID分配给这两个字段，因此不确定如何解决这个问题

我找到了解决办法。我将其添加到所选答案下的注释中。

尝试以下操作：

$('#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和名称必须相同才能工作

我也有同样的问题，如果这不起作用，让我知道，这样我可以进一步协助

编码快乐

试试这个：

$('#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和名称必须相同才能工作

我也有同样的问题，如果这不起作用，让我知道，这样我可以进一步协助

编码快乐

请查看此网站。他们有两个关于JQuery验证的例子

希望对你有帮助

快乐编码

请查看此网站。他们有两个关于JQuery验证的例子

希望对你有帮助

---

快乐编码

我认为这是因为input标记形式中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"
        }
    }
});

编辑：看看这个问题，我想他和你有同样的问题

Edit2：要编辑它的显示方式，请在输入标记后面放置一个容器，比如

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

然后应用一些css来整理东西

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

---

或者，您可以随时检查进一步的修改

我认为这是因为输入标记形式中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"
        }
    }
});

编辑：看看这个问题，我想他和你有同样的问题

Edit2：要编辑它的显示方式，请在输入标记后面放置一个容器，比如

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

然后应用一些css来整理东西

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

---

或者，您可以随时检查是否有进一步的修改

，因此，如果我的姓名和id值不准确，是否无法使其正常工作？Rails有一种处理表单的有趣方式……因此它会自动为我创建te id和名称字段。我的rails表单字段代码如下所示：First Name，：class=>clearField curved%>这会产生：关于如何更改它的想法吗？那么，如果我的Name&id值不精确，就没有办法让它工作吗？Rails有一种处理表单的有趣方式……因此它会自动为我创建te id和名称字段。我的rails表单字段代码如下所示：First Name，：class=>clearField curved%>这会产生：关于如何改变它的想法？尝试过这个……但仍然没有成功。查看关于我的问题的最后一次编辑以查看更新的代码：|问题是当我有用户[username]时，我在JS控制台中收到一个错误，说“意外令牌”['Dude…非常感谢。这个问题的答案就是它。所以对于那些感兴趣的人来说…正确的答案应该是在字段名周围加引号。在我的例子中，确保使用Rails生成的值作为“名称”。因此正确的代码应该是：规则{user[username]：必需的，用户[email]：{required:true，email-true} }哇…我很高兴我找到了这个解决方案。这一直困扰着我。我真是太感谢你了。如果你想编辑你的答案来包含这个修改，我想下一个受挫的人会感谢你：现在…不管怎样，你有没有资源来编辑它的显示方式，因为错误消息看起来很奇怪。你应该吗我是这样做的吗？我尝试了错误消息的放置，但仍然没有成功。请检查我的代码，看看是否有任何错误。顶部是jQuery，底部是Rails，正下方是Rails的HTML输出。谢谢。尝试了这个…但仍然不走运。请参阅我问题的最后一次编辑更新的代码：|问题是当我有用户[username]时，我在JS控制台中得到一个错误，说“意外的令牌”['Dude…非常感谢。这个问题的答案就是它。所以对于那些感兴趣的人来说…正确的答案应该是在字段名周围加引号。在我的例子中，确保使用Rails生成的值作为“名称”。因此正确的代码应该是：规则{user[username]：必需的，用户[email]：{required:true，email-true}}哇……我很高兴我找到了这个

---

解决方案。这一直困扰着我。我对你感激不尽。如果你想编辑你的答案来包含这个修改，我想下一个受挫的人会感谢你：现在……很可能，你有任何资源来编辑它的显示方式，因为错误消息看起来很奇怪。我应该这样做吗？我尝试了错误消息的放置，但没有成功。你能检查一下我的代码，看看你是否发现了什么错误吗？顶部是jQuery，底部是Rails，下面是Rails的HTML输出。谢谢。@littlechad将什么放在了validate方法中？编辑评论：尝试在输入标记之后添加一个容器，我的意思是在validate方法中添加这个：errorPlacement:functionerror，element{error.appendToelement.next；}顺便问一下，我将errorPlacement代码放在哪里？应该在第二个}消息之后吗？或者我应该把所有规则都去掉，然后添加它吗？把它放在：$'user_new'。validate{}；在规则之后，我更新了我的答案：@littlechad将什么放在了validate方法中？编辑评论：尝试在输入标记之后添加一个容器，我的意思是在validate方法中添加这个：errorPlacement:functionerror，element{error.appendToelement.next；}顺便问一下，我将errorPlacement代码放在哪里？应该在第二个}消息之后吗？或者我应该把所有规则都去掉，然后添加它吗？把它放在：$'user_new'。validate{}；在规则之后，我更新了我的答案：