How to check input field in bootstrap modal - backbone.js

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.