Backbone-Forms中的实时验证

时间:2012-10-30 11:57:09

标签: validation backbone.js

我正在使用Backbone-Forms并使用以下架构创建了一个模型:

  schema:
    title:
      type: "Text"
      validators: ["required"]
    description: 
      type: "TextArea"
      validators: ["required"]
    location:
      type: "Text"
      validators: ["required"]

当我尝试使用空字段提交表单时,验证会正确进行,并且它们都会收到错误类。

但是,当我更新输入以获取内容时,在我尝试再次提交表单之前,错误类不会从输入中删除。 同样,如果我最初输入有效输入然后删除所有内容,则在我尝试再次提交表单之前,它不会通知我错误,而我想立即知道。

有没有办法在修改后的输入字段上触发验证?

2 个答案:

答案 0 :(得分:0)

来自文档:http://backbonejs.org/#Model-validate

  

isValidmodel.isValid()

     

如果您静默更改它们,模型可能会进入无效状态...在处理表单输入时很有用。根据您的验证功能,调用model.isValid()检查模型当前是否处于有效状态。

也来自https://github.com/thedersen/backbone.validation#what-gets-validated-when

  

什么时候得到验证?

     

如果您使用的是Backbone v0.9.1或更高版本,则将验证模型中的所有属性。但是,如果从未设置过名称(显式或默认值),则在设置之前不会验证该属性。

     

在填充表单时验证表单时非常有用,因为您不想提醒用户输入尚未输入的错误。

     

如果您需要验证整个模型(两个属性是否已设置),您可以在模型上调用validate()isValid(true)

Backbone-Forms文档特别提到了model.validate:

https://github.com/powmedia/backbone-forms#model-validation

您可以轻松地将模型连接起来。验证任何编辑事件或点击您想要的事件。

此外,您可能会发现这很有用(不确定它是否与Backbone.Forms兼容):

https://github.com/thedersen/backbone.validation

答案 1 :(得分:0)

使用Backbone-Forms进行“实时验证”的方法是扩展Backbone.Form模型并附加事件来调用自定义方法来验证字段,然后只是“新”您的自定义表单而不是Backbone.Form

(Backbone.Form只是Backbone.View的子类)

以下是一些示例代码:

    var MyCustomForm = Backbone.Form.extend({
        events: {
            "blur input": "validateRealTime"
        },
        validateRealTime:   function(e){
            if(e.currentTarget.value == "") return;
            var err = this.fields[e.currentTarget.name].validate();
            if(err)
                myDisplayErrorMethod(err.message);
        }
    });

关于这一点的好处是,它将利用您在模型模式中定义的验证器,以便获得您在那里定义的所有相同验证和消息(如果您确实定义了自定义集合)。

此外,如果你像我一样定义了几个验证器,每次用户从字段“模糊”时,它将按顺序调用验证器,直到所有验证器都通过。所以这是一个加分。

旁注,你会注意到我if(e.currentTarget.value == "") return;。这只是我的用例,我不想仅仅因为用户点击并点击它而显示错误。