jQuery-validate不能与Kendo Button一起工作(包括jsfiddle)

Question

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

下面是一个示例:

<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工作?我有点想保持我的按钮作为剑道按钮，因为它们提供功能和样式。

谢谢

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
});

虽然我认为你应该在你的<button>和<form>中添加一个id，这样你就可以更精确地瞄准它们。

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

Answer 2

用Kendo Validator代替Jquery Validator。

http://demos.telerik.com/kendo-ui/validator/index