警报在模型验证条件

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控制器动作，其中：

• 实例给定PARAMS
• 呼叫有效的新对象？它不保存它

然后：

• 失败时，更新错误信息
• 在成功的形式，我将返回一个自定义的Ajax响应将显示警报，并开始张贴现实目的。

Answer 2

我意识到，这是不是真的有可能通过在模型或控制器，并采取三个验证过程的组合：

• 验证模型
• 的simpleform client side validations gem - 这是很好的，它在表单域丢失焦点的时刻测试有效性 - “实时”验证。
• 和一些additional javascript警报与弹出窗口和错误，粘贴在下面。

希望这使得表单几乎无法提交，用户不知道什么是缺少的。

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