How to check input field in bootstrap modal

Question

I have a backbone View like follows:

app.View.WelcomeProfil = Backbone.View.extend({
initialize : function(){
this.header = document.createElement('div');
this.$header = $(this.header);
this.render();
},

model : new app.Model.AccountProfile(),

template : {
header : _.template($('#welcome-profile-header').html()),
body : _.template($('#welcome-profile').html()),
error : _.template($('#welcome-profile-error').html())
},

attributes : {
'class' : 'form-horizontal row-fluid'
},

tagName : 'form',

next : function(){
var self = this;

_.each(this.$el.serializeArray(), function(value){
  self.model.set(value.name, value.value);
});

this.model.save(null, {
  success : function(model){
    self.trigger('next');
  },
  error : function(model){
    self.$el.append(self.template.error());
  }
});
},

previous : function(){
 this.trigger('previous');
},

render: function(){
var self = this;

this.$header.html(this.template.header());
this.model.fetch({
  success : function(model){
    self.$el.html(self.template.body(model.toJSON()));
  },
  error : function(model){
    self.$el.html(self.template.body(model.toJSON()));
    self.$el.append(self.template.error());
  }
});
return this;
},

destroy : function(){
  this.$header.remove();
  this.remove();
  this.trigger('remove', this);
}
});

My template looks like follows

<script type="text/template" id="welcome">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
  <@ if (previous) { @><input type="button" class="pull-left" value="<fmt:message key="foobar.form.previous"/>"/><@ } @>
  <@ if (next) { @><input type="button" class="pull-right" value="<fmt:message key="foobar.form.next"/>"/><@ } @>
  <@ if (finish) { @><input type="button" class="pull-right" value="<fmt:message key="foobar.form.finish"/>"/><@ } @>
</div>

This is the template which is inserted inside modal-body

<script type="text/template" id="welcome-profile">
<fieldset>
<div class="control-group">
  <label class="control-label" for="firstName"><fmt:message key="foobar.user.firstName"/></label>
  <div class="controls">
    <input type="text" class="input-block-level" name="firstName" required="required" placeholder="<fmt:message key="foobar.user.firstName"/>" value="<@= firstName @>">
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="lastName"><fmt:message key="foobar.user.lastName"/></label>
  <div class="controls">
    <input type="text" class="input-block-level" name="lastName" required="required" placeholder="<fmt:message key="foobar.user.lastName"/>" value="<@= lastName @>">
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="jobTitle"><fmt:message key="foobar.user.jobTitle"/></label>
  <div class="controls">
    <input type="text" class="input-block-level" name="jobTitle" required="required" placeholder="<fmt:message key="foobar.user.jobTitle"/>" value="<@= jobTitle @>">
  </div>
</div>

I want that when the user clicks next ...somehow i should be able to check if the first name , last name and job title fields are filled up or not..? Is this possible.

Answer 1

Create a validate method on your model like so: http://backbonejs.org/#Model-validate

Once created, backbone will automatically invoke this method before running the save, and you can bind to the invalid event to update the view with the error.