以模型驗證為條件的警報

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客戶端驗證gem-這是v好，它在表單字段失去焦點時測試有效性-“實時”驗證。
• 以及一些其他的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;
  }
});