I’ve got a Backbone model with a custom validate method that validates the format of one of a the model’s attributes. My model is hooked up to a view that exposes said attribute via a text field. The view has a ‘save’ button that the user must explicitly press to save the model changes back to the server.
When the user types an invalid attribute value, I want to visually mark the field as being in an invalid state. So far, easy – I can bind the change event of the input field to a function that calls myModel.set({ attribute: value }), and listen for the "error" event on the model to tell when the validation has failed and I should mark the input as invalid.
The problem comes when I want to handle the save button click. Because Backbone.Model.set aborts actually setting the attributes on the model if validation fails, my model will not accurately reflect the value the user has entered unless the value is valid. When the user clicks save after typing in an invalid value, I check whether the model is valid, find that it is (because the invalid attribute was never actually set), and save the old (valid) attribute value to the server.
What it seems like I want is a version of set that always makes the requested changes, but also still triggers validations and events. set(..., { silent: true }) will allow the change to go through, but will not run validations or trigger events.
In short – I want my model to sometimes exist in an invalid state (if the user has entered invalid attribute values), and I want to be able to get events when it transitions between valid and invalid. Is there a graceful way to do this with backbone, or am I thinking about this completely wrong?
What I’ve done with this sort of validation is to reset the models attributes from the inputs before save on the save click (only doing the save if the set doesn’t fail)
This way the save button click re triggers the validation – triggering the error.
It means the model is always valid and you cant progress to the next page until the input is all valid.