Real-Time Validations in Backbone-Forms - validation

Question

I am using Backbone-Forms and have created a model with the following schema:
schema:
title:
type: "Text"
validators: ["required"]
description:
type: "TextArea"
validators: ["required"]
location:
type: "Text"
validators: ["required"]
When I try and submit the form with empty fields, the validation correctly takes place and they all receive the error class.
However, when I then update an input to have content, the error class doesn't get removed from my input until I try and submit the form again.
Likewise, if I originally enter a valid input and then delete all content, it doesn't inform me of an error until I try and submit the form again whereas I would like to know immediately.
Is there a way to trigger validation on a modified input field?

Answer 1

From the docs: http://backbonejs.org/#Model-validate:
isValidmodel.isValid()
Models may enter an invalid state if you make changes to them silently ... useful when dealing with form input. Call model.isValid() to check if the model is currently in a valid state, according to your validate function.
also from https://github.com/thedersen/backbone.validation#what-gets-validated-when
What gets validated when?
If you are using Backbone v0.9.1 or later, all attributes in a model will be validated. However, if for instance name never has been set (either explicitly or with a default value) that attribute will not be validated before it gets set.
This is very useful when validating forms as they are populated, since you don't want to alert the user about errors in input not yet entered.
If you need to validate entire model (both attributes that has been set or not) you can call validate() or isValid(true) on the model.
The Backbone-Forms docs specifically mention model.validate:
https://github.com/powmedia/backbone-forms#model-validation
You could easily hook model.Validate up to whatever edit events or click events you want.
Also, you might find this useful (not sure if it is compatible with Backbone.Forms though):
https://github.com/thedersen/backbone.validation

Answer 2

The way you can do "Real-Time Validations" with Backbone-Forms is by extending the Backbone.Form model and attaching event(s) to call your custom method(s) to validate the field, then just "new"ing your custom form instead of Backbone.Form
(Backbone.Form is just a subclass of Backbone.View)
Here's some sample code:
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);
}
});
The great thing about this is that it'll utilize the validators you defined in the model schema so you get all the same validations and messages you defined there as well (if you actually did define custom mesesages).
Also if you defined several validators as I did, each time the user "blur"s from the field, it'll call your validators in order until all validators pass. So that was a plus.
Side note, you'll notice I did if(e.currentTarget.value == "") return;. That's just my use case, I didn't want to show errors just because users clicked and clicked away.