Windows Metro App、Hammer.js 和 Knockout.js - 无法滑动到下一页

Question

试图在 winjs Metro 应用程序中左右平移以更改页面。当前出现以下错误：

ms-appx://7d6d13c7-6e98-48fd-aff4-70283c269088/js/jquery.validate.js 中第 112 行第 4 列未处理的异常

0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“形式”

我已经放置了一些验证来检查是否使用 jQuery 验证输入了表单数据。要启用滑动功能，我需要转到每个单独的页面，然后滑动，否则应用程序会崩溃。当我单击一个按钮但滑动不起作用时，我能够转到每个页面。

var myElement = document.getElementById('myElement');

            // create a simple instance
            // by default, it only adds horizontal recognizers
            var mc = new Hammer(myElement);

            // let the pan gesture support all directions.
            // this will block the vertical scrolling on a touch-device while on the element
            mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });

            // listen to events...
            mc.on("panleft panright panup pandown tap press", function (ev) {
                if (ev.type == "panleft") {
                    if ($("form#mortgageDetails").valid()) {
                        WinJS.Navigation.navigate('/pages/overpayments/overpayments.html');
                    }
                }
            });

HTML Mark Up

  <section class="page-section" aria-label="Main content" role="main">
            <div id="wrapper">
                <form id="mortgageDetails">
                    <div id="applicantDetails">
                        <div id="alertLbl" class="win-error"></div>

                        <label>Loan Amount *</label> <input type="text" data-rule-number="true" data-rule-required="true" name="loanamount" id="loanamount" data-bind="value: MortgageDetail.LoanAmount" /> <!--onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"-->
                        <span class="field-validation-valid error" data-valmsg-for="loanamount" data-valmsg-replace="true"></span>

                        <label>Loan Term In Years *</label><input type="text" data-rule-number="true" data-rule-required="true" name="loanterminyears" id="loanterminyears" data-bind="value: MortgageDetail.LoanTermInYears" />
                        <span class="field-validation-valid error" data-valmsg-for="loanterm" data-valmsg-replace="true"></span>

                        <label>Annual Interest Rate *</label> <input type="text" name="annualinterestrate" id="annualinterestrate" data-bind="value: MortgageDetail.AnnualInterestRate, uniquename:true" /> <br />
                        <span class="field-validation-valid error" data-valmsg-for="annualinterestrate" data-valmsg-replace="true"></span>

                        <label>Monthly Payment Amount </label>£<span id="monthlypaymentamount" data-bind="text: MortgageDetail.MonthlyPaymentAmount"></span> <br />
                        <!--<p><a class="navLink" href="/pages/overpayments/overpayments.html">Overpayments</a></p>-->
                        <div style="width:280px; ">
                            <input type="submit" id="btnOverpayments" value="Overpayments" style="margin-top: 5px; float:right;">
                        </div>
                    </div>
                </form>
            </div>
            <div id="myElement"> </div>
        </section>

当错误发生时，它会将我带到以下页面 jQuery 验证页面到此位置

valid: function() {
    var valid, validator;

    if ( $( this[ 0 ] ).is( "form" ) ) {
        valid = this.validate().form();
    } else {
        valid = true;
        validator = $( this[ 0 ].form ).validate();
        this.each( function() {
            valid = validator.element( this ) && valid;
        });
    }
    return valid;
},

Answer 1

如果不先使用the .validate() method 初始化插件，您将无法使用the .valid() method。这是您的全部问题，也是您的 JavaScript 错误的根源。

请参阅example code here。