CODEWITHSUNDEEP
javascriptjquerykendo-uijquery-validate
Antoine Cloutier
Antoine Cloutier

Reputation: 1330

jQuery-validate not working with Kendo Button (jsfiddle included)

Took me a while to realize that the reason why jquery-validate wasn't working in my Kendo Mobile application was because my submit button was a Kendo Button.

Here is a jsfiddle to demonstrate:

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

That being said, is there any workaround to make jquery-validate work ? I kind of would like to keep my buttons as Kendo buttons as they provide functionalities and styles.

Thank you

Upvotes: 1

Views: 362

Answers (2)

Sparky
Sparky

Reputation: 98718

The problem here is that although you've set the button to a type="submit", you've set the data-role to button which effectively does the same as a type="button". In other words, the data-role="button" is making your type="submit" behave like a type="button".

The only workaround is that you must manually capture the button and force a submit.

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

Although I think you should add an id to your <button> and <form> so that you can target them more precisely.

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

Upvotes: 2

Mark
Mark

Reputation: 4873

Instead of Jquery Validator, try using Kendo Validator.

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

Upvotes: 0

Related Questions