validation - How to report invalid form fields using Backbone.js -


I am using backbone to manage the status of an HTML form. The role of the model is to recognize the assumption that the role of wrap is to wrap the HTML form and respond to the change or error events emitted by the model.

The spinal cord only seems to emit changes events The given fields are actually valid. This is creating some really unpredictable behavior which makes me feel that I am doing this wrong.

Here's a summary of what I'm doing here: 1. Sorts the initial load form and presents it in the model 2. When any error event is emitted , Then I generate an error node next to the invalid area. 3. When a change event is emitted, I remove the error notes next to the (now valid) field.

When a page is initially provided with a valid form, and the user invalidates a field, the message is displayed as expected; However, the model does not update the area internally, so when a user corrects the error, a change event is never emitted

< P>

Correct field is correct The message disappears, but if you change it again in an invalid state, the message never disappears.

What am I doing wrong? Maybe there is another way I should use?

My model
  var Foo = Backbone.Model.extend ({valid: function} {var errors = {}; if (_.isEmpty (atri) ); If (atri.fu & atri.fu! = 123) {errors.foo = ['eu is not equal to 123'];} (atri bar and attr.bar! = 456) {errors. Bar = ['bar is not equal to 456'];} Return _.isEmpty (Errors)? Undefined: Errors;}});   

My view
  FooForm = backbone.View.extend ({event: {'change: input': 'onFieldChange'}, get started: function (Option) {this.model.on ('error', this.renderErrors, this); this.model.on ('change', this.updateFields, this); // debugging only. Models. ('All' , Function () {console.info ('[all fu]', logic, this.toJSON ())}; this.model.set (this.serialize ());}, onFieldChange: function (event) {var Field = event.target, name = field.name, value = field.value; this.model.set (name, value);}, renderErrors: function (models, errors) {_.each (Errors, functions (messages, FieldName) {var el = $ ('#' + fieldName), warning = $ ('& lt; div / & gt;') addClass ('error'); el.parent (). Find ('error') Remove (); _.each (message, function) {alert.clone () .text (message) .insertAfter (el);})}}}}, updatefield: function (model, option) {if ( (Options). Options.changes); _.each (_key (options.changes), function (field name) {var el = $ ('#' + fieldName); el.parent (). Feather d ('. Error ') delete () .; }); }, Serialize: function () {var raw = this. $ El.find (': input'). SerializeArray (), data = {}, view = this; $ .each (raw, function () {// Enter name name by the name of the form field var name = this.name; if (data [name]! == undefined) {if (! Data [name] Push) {data [name] = [data [name]];} data [name]. Pash (this .value || '');} and {data [name] = this.value || '';}} ); Return data; }});    

You can not validate individual fields using original backbone validation.

I use this verification plugin in my app:

Then you add verification rules according to each field in your model (this is optional, so you have it in all models Need not be added):

  var NewReview = backbone.Model.extend ({initialize: function () {/ * ... *}, verification: {summary: {Required: Truth: Minimala: 10}, Professionals: {Required: True, Mininta: 10}, Cons: {Required: Truth, Minletta: 10}, Composite: Function (Value) {var text = $ (value) .text () Replace (/ \ s {2,} / G, ''); if (text.length == 0) text = value; if (text.length & lt; 20) "Overall review is very low";}, Rating: {range: [0.5, 5]}, Product_id: {Required: true}}});   

You can validate entire model or different fields compared to scenes or elsewhere:

  if (this.model.validate () ) {...}   

or

  if (this.model.isValid ("summary")) {...}    

Comments