Question

我是Backbone JS的新手，问题可能重复，但我无法弄清楚问题。我需要在我的应用程序中处理表单提交事件以使用默认的HTML5验证。但不幸的是，它不适合我。下面在securityTokenTmpl和securityQATmpl中，我有一个带有提交按钮的表单，它不会触发提交事件，但点击工作正常。

视图---------

    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模板

{{#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模板

{{#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}}

Answer 1

模板中有一个错误我在模板中有div，我在表单开始标记之前打开并在表单结束标记之前关闭它应该在表单结束标记之后关闭。

{{#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}}

表单提交事件不在主干中触发？

1 个答案: