Question

我有一个Picture模型，其中包含各种验证：

  validates :title, presence: true
  validates :caption, presence: true
  validates :image, presence: true
  validates :price, numericality: { greater_than_or_equal_to: 1, less_than_or_equal_to: 1000 }
  validates_size_of :tag_list, :minimum => 3, :message => "please add at least three tags"

标签列表必须以特定格式提交：至少三个标签，用逗号和空格分隔：例如foo, bar, cats

我希望有一个警告，告诉用户“请等待，我们正在上传您的图片” - 但仅在模型通过所有验证后（在控制器中的.save之前）< / p>

有没有办法在控制器中执行此操作，我更喜欢，或者我必须使用一些javascript：

$("form#new_picture").on("submit", function () {
    if LOTS OF HORRIBLE REGEX ON FORM FIELDS {
      MESSAGE HERE
      return true;
    } else {
      return false;
    }
  });

或者作为after_validation回调的一部分，有没有办法在模型中执行此操作？

任何建议都非常感谢。提前谢谢。

Answer 1

我会构建一个JS函数来提取我想要验证的字段。

然后创建一个自定义的AJAX控制器动作，其中包括：

使用给定的参数
通话有效吗？在它上面而不保存它

然后：

如果失败，请使用错误消息更新表单
成功后，我会返回一个自定义的ajax响应来显示警告并开始发布真实对象。

Answer 2

我意识到通过模型或控制器实现这一点并不可行，并且采用了三种验证过程的组合：

模型中的验证
simpleform client side validations gem - 这很好，它在表格字段失去焦点时测试有效性 - “实时”验证。
还有一些additional javascript警告弹出窗口和错误，粘贴在下面。

希望这使得表单几乎不可提交，而用户不知道缺少什么。

JS解决方案

FORM

<form id="new_pic" novalidate>
  <p><input type="file" name="file" required></p>
  <p><input type="string" name="name" placeholder="Name" required></p>
  <p><input type="string" name="tags" placeholder="Tags" data-validation="validateTags"></textarea></p>
  <p><textarea name="description" data-validation="validateDescription"></textarea></p>
  <p><button type="submit">Submit</button>
</form>

JS

var Validator = function(form) {
  this.form = $(form);
}
$.extend(Validator.prototype, {
  valid: function() {
    var self = this;

    this.errors = {};

    this.form.find('[required]').each(function() {
      self.validateRequired($(this));
    });

    this.form.find('[data-validation]').each(function() {
      var el = $(this),
          method = el.data('validation');

      self[method].call(self, el);
    });

    return $.isEmptyObject(this.errors);
  },

  validateRequired: function(input) {
    if (input.val() === '') {
      this.addError(input, 'is required');
    }
  },

  validateDescription: function(input) {
    if (input.val().length < 64) {
      this.addError(input, 'must be at least 64 characters');
    }
  },

  validateTags: function(input) {
    var tags = input.val().split(/, ?/);

    if (tags.length < 3) {
      this.addError(input, 'must have at least 3 tags');
    }
  },

  addError: function(input, error) {
    var name = input.attr('name');
    this.errors[name] = this.errors[name] || [];
    this.errors[name].push(error);
    input.after('<span class="error">' + error + '</span>');
  }
});

$('form#new_pic').on('submit', function(event) {
  event.preventDefault();

  var form = $(this),
      validator = new Validator(form);

  form.find('.error').remove();

  if (validator.valid()) {
    // continue with upload
    alert('Go!');
    return true;
  } else {
    // complain
    alert('Stop!');
    return false;
  }
});

警报以模型验证为条件

2 个答案: