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

Posted

技术标签:

【中文标题】Rails 表单验证方式 + 无提交按钮【英文标题】:Rails Way for Form Validation + No Submit Button 【发布时间】: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() ); 【参考方案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
);

【讨论】:

以上是关于Rails 表单验证方式 + 无提交按钮的主要内容,如果未能解决你的问题,请参考以下文章

Rails 5 ajax 表单:单击 Ajax 中的 2 个单选按钮之一提交表单

Rails:一个表单中的多个提交按钮

使用 ujs 手动提交远程表单的 Rails 方式

Rails 5 simple_form 将单选按钮标记为必需,如果未填写则阻止提交表单

Rails ActiveAdmin active_admin_form_for 提交按钮已禁用

使用 js/jquery 在 ruby​​ on rails 中隐藏 form_tag 上的提交按钮