Rails 表单验证方式 + 无提交按钮答案

【问题标题】：Rails Way for Form Validation + No Submit ButtonRails 表单验证方式 + 无提交按钮
【发布时间】：2018-01-11 01:48:37
【问题描述】：

目前我正在使用 jQuery 来处理这个问题，但它不是最佳的 - 我可以经常模拟其中的错误（提交按钮需要我多次点击返回字段。

$(document).ready(function (){
    validate();
    $('#required_field1, #required_field2, #required_field3, #required_field4, #required_field5, #required_field6').change(validate);
});

function validate(){
    if ($('#required_field1').val().length   >   0   &&
        $('#required_field2').val().length  >   0   &&
        $('#required_field3').val().length    >   0 &&
        $('#required_field4').val().length    >   0 &&
        $('#required_field5').val().length    >   0 
        ){
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}

但它也完全不适合 Rails。虽然我理解数据绑定的概念对它不友好，但我想知道在 Rails 中是否有更好的方法来做到这一点？

目前没有它你可以提交一个空白页面，然后立即出错，这比这更糟糕的体验。

感谢任何反馈。

Rails 5 + Bootstrap3（这并不重要。）

【问题讨论】：

如果字段是表的列，那么为什么不使用 rails 的验证方式，例如：validate :required_field1, presence: true...
@Abhi 这基本上就是我要问的 - 这会传递到提交按钮吗？还是您在模型中谈论？
是的，如果您提到的字段是数据库列，那么您必须让 rails 处理验证Rails Validation
@Abhi 谢谢 - 这可以帮助我处理后端验证，但是有没有更好的 Rails 方法可以让提交按钮在所有表单都被填写之前无法点击？还是我只有一个jQuery方法？
我已经发布了一个答案，我觉得当字段数量很多时会更干净。顺便说一句，在您的代码中，您需要调用 validate 内部函数，例如：$('#required_field1, #required_field2, ...').change(function() { validate() });

标签： javascript jquery ruby-on-rails forms

【解决方案1】：

我会使用jQuery's serializeArray:

例如：

var params = jQuery("#form_id").serializeArray();

//This should give you form params like:
// [
//   {name: "obj[required_field1]", value: ""},
//   {name: "obj[required_field2]", value: ""},
//   .
//   .
//   .
// ]

jQuery.each(params, function(i, v) {
  if(v["value"].length > 0) {
    jQuery("input[type=submit]").prop("disabled", false);
  } else {
    jQuery("input[type=submit]").prop("disabled", true);
  }
});

注意：这只是一个让您理解概念的示例（因为我没有您的 HTML/Rails 模板）。

编辑

将此逻辑用于更改每个文本字段的事件。

jQuery("#required_field1, #required_field2, ...").change(function() {
  // Above code goes here
});

【讨论】：