Question

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

这是一个证明：

的jsfiddle

<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>，以便您可以更准确地定位它们。

DEMO：http://jsfiddle.net/YSDGL/5/

Answer 2

尝试使用Kendo Validator。而不是Jquery Validator。

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

jQuery-validate不使用Kendo Button（包括jsfiddle）

2 个答案: