以模型验证为条件的警报

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 之前）

有没有办法在控制器中执行此操作，我更喜欢，还是我必须使用一些 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 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;
  }
});