Javascript 如何使用gem'；jquery验证rails'；

我在Gemfile中有gem'jqueryvalidationrails'

将其包含在application.js文件中

/=require jquery.validate

然后我有一些函数/脚本，可以向某些字段添加验证，如：

// Field names from FORM
function validateCampaignForm(){
   var $form = $('form.user_form');
   $form.validate({
      rules: {
         "user[title]": {required: true, maxlength: 80},
         "user[content]": {required: true, maxlength: 80},

         }
    });
}
// Load
validateCampaignForm();


// Save button on click
$('a.save-form').on('click', function(){
  // should validates field
});

生成的HTML表单：

<form class="user_form" action="/users/1110212666" accept-charset="UTF-8" method="post" novalidate="novalidate">
  <div class="row">
    <label>Title</label>
    <input class="required" type="text" value="We saved your cart" name="user[title]" id="user_title">
  </div>
  ...other fields....

  <a class="button primary save-form" href="#">Save Settings</a>
</form>

---

要消除表单中的提交按钮，请使用

.valid（）

触发验证

<form class="campaign_form" action="/users/1110212666" accept-charset="UTF-8" method="post" novalidate="novalidate">
  <div class="row">
    <label>Title</label>
    <input class="required" type="text" value="We saved your cart" name="user[title]" id="user_title">
  </div>
  ...other fields....

  # IMPORTANT NOTE: <a> or other elements aside from button type="submit" can only trigger the validation. 
  // <a class="button primary save-form" href="javascript:;">Save Settings</a>
  <button type="submit" class="save-form">Save Settings</button>
</form>

---

您可以直接添加.validate函数，而不是在单独的函数中写入它。尝试在document ready Event中添加此代码您尚未在表单上添加

user\u form

类，将调用验证。请检查下面给出的答案，并让我知道进一步的指导。

保存设置

不会提交表单，因为它不是“提交”按钮。@Gabbar“是”按钮不是

提交

类型，因为我将发布提交表单的AJAX请求。必须验证表单字段，然后执行ajax操作。谢谢。@Vishal我尝试了你的建议，将.validate内容放在ready函数的顶部，但仍然无法使错误显示在表单中。嗨@Gabbar，我尝试了你的答案，但字段上的错误仍然没有显示。@aldrien.h在测试之前，请确保你已正确配置jquery validate gem及其依赖项。还要确保已经添加了jquery。要测试它，可以检查元素并检查是否有错误标签？jquery和jquery.validate脚本都已加载。但表单中的必填字段不会发生任何变化，应该生成标签并添加错误类，对吗？但是没有：（我试着制作另一个表单，它可以工作，这意味着插件加载良好，在我以前的表单中有一些错误需要解决。感谢您最终解决了问题，提交类型是触发此验证的必要条件，简单链接无法工作。我支持帮助：）

<form class="campaign_form" action="/users/1110212666" accept-charset="UTF-8" method="post" novalidate="novalidate">
  <div class="row">
    <label>Title</label>
    <input class="required" type="text" value="We saved your cart" name="user[title]" id="user_title">
  </div>
  ...other fields....

  # IMPORTANT NOTE: <a> or other elements aside from button type="submit" can only trigger the validation. 
  // <a class="button primary save-form" href="javascript:;">Save Settings</a>
  <button type="submit" class="save-form">Save Settings</button>
</form>

// initializes validation
 $('.user_form').validate({
    rules: {
       "user[title]": {required: true, maxlength: 80},
       "user[content]": {required: true, maxlength: 80}
       }
  });

// on click validation of user form
$('.save-form').on('click', function(e){
  e.preventDefault(); // to prevent form from normal submission
  $('.user_form').valid();
});

// other way (catch on form submission)
$('form.campaign_form').on('submit', function(e){
  e.preventDefault();
  $('.user_form').valid();
});