Javascript 以模型验证为条件的警报

我有一个带有各种验证的

图片

模型：

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

或者在模型中是否有这样做的方法，作为\u验证后

回调的一部分

非常感谢您的建议。提前感谢。
我将构建一个JS函数来提取我想要验证的字段

然后创建自定义AJAX控制器操作，该操作：


用给定的参数实例化一个新对象
打电话有效吗？在它上面没有保存它

然后：


失败时，使用错误消息更新表单
如果成功，我将返回一个自定义ajax响应以显示警报并开始发布真实对象
我意识到，通过模型或控制器，这实际上是不可能的，于是我求助于三个验证过程的组合：


模型中的验证
这很好，它在表单字段失去焦点时测试有效性-“实时”验证
还有一些是用弹出窗口和错误来提醒的，粘贴在下面

希望这能让表单在用户不知道缺少什么的情况下几乎不可提交

JS解决方案

形式






提交

JS

var验证程序=函数（表单）{
this.form=$（form）；
}
$.extend（Validator.prototype{
有效：函数（）{
var self=这个；
this.errors={}；
this.form.find（“[必需]”）.each（函数（）{
需要自我验证（$（此））；
});
this.form.find（“[数据验证]”）.each（函数（）{
var el=$（此），
方法=el.数据（“验证”）；
self[method]。调用（self，el）；
});
返回$.isEmptyObject（this.errors）；
},
validateRequired:函数（输入）{
if（input.val（）==''）{
此.addError（输入'is required'）；
}
},
validateDescription:函数（输入）{
if（input.val（）.length<64）{
此.addError（输入“必须至少64个字符”）；
}
},
validateTags:函数（输入）{
var tags=input.val（）.split（/，？/）；
如果（标签长度<3）{
此.addError（输入“必须至少有3个标记”）；
}
},
加法器：函数（输入，错误）{
var name=input.attr（'name'）；
this.errors[name]=this.errors[name]| |[]；
此.errors[name].push（错误）；
输入后（“”+错误+“”）；
}
});
$（'form#new#pic'）。关于（'submit'，函数（事件）{
event.preventDefault（）；
变量形式=$（此），
验证人=新的验证人（表格）；
form.find（'.error'）.remove（）；
if（validator.valid（））{
//继续上载
警惕（‘去！’）；
返回true；
}否则{
//抱怨
警惕（‘停止’）；
返回false；
}
});

<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>

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