javascript - jQuery-validate 不适用于 Kendo Button(包括 jsfiddle)

Question

我花了一段时间才意识到 jquery-validate 在我的 Kendo Mobile 应用程序中不起作用的原因是因为我的提交按钮是一个 Kendo 按钮。

这是一个用于演示的 jsfiddle:

DEMO

<div id="phoneApp" style="display:none;">
    <div id="forms" data-role="view">
        <form>
                <ul data-role="listview" data-style="inset">
                    <li>
                        Amount
                        <input type="number" step="0.01" name="amount-fr" />
                    </li>
                    <li>
                        Description
                        <textarea name="description-fr" ></textarea>
                    </li>
                </ul>
            <button type="submit">Submit</button>        
            <button type="submit" data-role="button">Submit (Data-role = button)</button>    
        </form>
    </div>
</div>

$(function() {
    var app;

    app = new kendo.mobile.Application($("#phoneApp"), {
        layout: "phoneDefault",
        transition: 'slide'
    });

    //Adjust visibility of proper app container
    $("#phoneApp").show();

    $( "form" ).validate({
        rules: {
            "amount-fr": {
                required: true,
                min: 1
            },
            "description-fr": {
                required: true
            }
        },
        messages: {
            "amount-fr": {
                required: "amount required !",
                min: "min is 1 !"
            },
            "description-fr": {
                required: "description required !"
            }
        }
    });
});

话虽如此，是否有任何解决方法可以使 jquery-validate 工作？我有点想将我的按钮保留为 Kendo 按钮，因为它们提供功能和样式。

谢谢

Answer 1

这里的问题是，尽管您已将按钮设置为 type="submit" , 你已经设置了 data-role至 button这实际上与 type="button" 相同.换句话说，data-role="button"正在制作你的 type="submit"表现得像type="button" .

唯一的解决方法是您必须手动捕获 button并强制submit .

$('button').on('click', function(e) {  // capture the button click
    e.preventDefault();  // the default button functionality is always ignored
    $('form').submit();  // force a submit
});

尽管我认为您应该添加一个 id给你的<button>和 <form>这样您就可以更准确地定位他们。

演示:http://jsfiddle.net/YSDGL/5/