0

我有一个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回调的一部分，有没有办法在模型中执行此操作？

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

4

2 回答 2

0

我已经意识到通过模型或控制器这实际上是不可能的，并结合了三个验证过程：

  • 模型中的验证
  • simpleform客户端验证 gem - 这很好，它在表单字段失去焦点的那一刻测试有效性 - “实时”验证。
  • 还有一些额外的 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;
  }
});
于 2013-06-25T17:58:05.007 回答
0

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

然后创建一个自定义 AJAX 控制器操作，其中：

  • 用给定的参数实例化一个新对象
  • 通话有效吗？不保存就可以了

然后：

  • 失败时，使用错误消息更新表单
  • 成功后，我将返回自定义 ajax 响应以显示警报并开始发布真实对象。
于 2013-06-23T19:57:34.430 回答