表单验证的Rails方式+没有提交按钮

Question

Currently I am using jQuery to handle this but it's less than optimal - I can emulate bugs within it quite often (Submit button requiring me to click back into fields multiple times.

$(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);
    }
}

But it also doesn't feel proper for Rails, at all. While I understand the concept of data-binding isn't friendly to it, I'm wondering if there is a better way to do this within Rails?

Currently without it you can Submit a blank page, and get an error immediately, which is much worse experience than this.

Appreciate any feedback.

Rails 5 + Bootstrap3(Not that it matters for this.)

Answer 1

I would use jQuery's serializeArray :

Eg:

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);
  }
});

NOTE: This is just an example to make you understand the concept(as I don't have your HTML/Rails template).

EDIT

Put this logic to change event of each text field.

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