form submit event not firing in backbone?

Question

I am new to Backbone JS and Question could be duplicate but I am not able to figure out the Problem. I need to handle form submit event in my application to use the default HTML5 validation. but unfortunately it's not working for me. below In securityTokenTmpl and securityQATmpl, i have form with submit button which is not firing submit event but click working fine.

view---------

    var securityInfoView = Backbone.View.extend({
    tagName : 'div',
    className : 'security-info-wrap',
    initialize : function() {
    var self = this;
    $('.application-content-wrap').append(self.$el);
    this.$el.append(securityInfoTmpl(self.options.result.bankInfo.siteModel));
    if (typeName === "TOKEN_ID" || typeName === "MULTI_LEVEL") {
    self.$el.find('.security-info-wrap .content-wrap').html(securityTokenTmpl({
    results : data
    }));
    }
    if (typeName === "SECURITY_QUESTION") {
    self.$el.find('.security-info-wrap .content-wrap').html(securityQATmpl({
        results : data
    }));
    }
    },
    events : {
            'submit' : 'submit'
        },
    submit : function(e) {
    console.log("form submit");
    e.preventDefault();
    // there after HTML5 validation i want to make Rest call
}
});

securityQATmpl Template

{{#results}}
<div>
<form id="securityQA"  method="POST">
 <div class="row">
{{#fieldInfo}}
{{#questionAndAnswerValues}}
<div class="small-12 columns"><label class="addAccountLabel">{{question}}</label>
        <input required  type='{{responseFieldType}}'  name='{{metaData}}'/>
</div>
{{/questionAndAnswerValues}}
{{/fieldInfo}}
</div> 
</div>  
<div class="row">
    <div class="small-9 columns"></div>
    <div class="small-3 columns"><input type="submit"  class="button" value="Next"/>           
</div>
</div>
</form>
<div class="clear"></div>
{{/results}}

securityTokenTmpl Template

{{#results}}
<div>
<form id="securityToken"  method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
        <input required  type='{{responseFieldType}}'  size='{{maximumLength}}' name="securityToken"/>
    </div>
{{/fieldInfo}}
</div>
</div>
<div class="row">
    <div class="small-9 columns"></div>
    <div class="small-3 columns"><input type="submit"  class="button" value="Next" /></div>
</form>
{{/results}}

Hey biril, there was Problem in the template. above template are error free. i found it when i was posting template in this question- thnaks — Sandeep vashisth

Sandeep vashisth Sandeep vashisth · Accepted Answer · 2014-01-11T11:30:50

There was an error in Templates i had a div in template which i was opening before form opening tag and closing before form closing tag it should be closed after form closing tag.

{{#results}}
<div>
<form id="securityToken"  method="POST">
{{#fieldInfo}}
<div class="row">
<div class="small-12 columns"><label class="addAccountLabel">{{displayString}}</label>
        <input required  type='{{responseFieldType}}'  size='{{maximumLength}}' name="securityToken"/>
</div>
</div>
 {{/fieldInfo}}
<div class="row">
    <div class="small-9 columns"></div>
    <div class="small-3 columns"><input type="submit"  class="button" value="Next" /></div>
</div>
</form>
</div>
{{results}}

form submit event not firing in backbone?

1 Answers