JQuery 移动验证不起作用，即不显示验证消息答案

【问题标题】：JQuery mobile validation not working i.e. not showing validation messagesJQuery 移动验证不起作用，即不显示验证消息
【发布时间】：2014-03-30 18:09:22
【问题描述】：

我正在尝试验证此表单：

<form id="manage-form" data-ajax="false">

<label for="business_Name" >Business Name:</label>
<input type="text" class="required" name="business_Name" id="business_Name" data-mini="true"/>



<input id="submission" type="submit" value="insert"/>

</form>

还有这个 JAVASCRIPT：

var amandeepdb;

$(document).ready(function(){

amandeepdb = openDatabase('AAFeedbackdb','1.0','AAFeedbackdb','2*1024*1024');


createTable();
insertAAType();


$("#submission").on("click", function (evt){


    handleAddForm();
    return false;
});

});

function handleAddForm(){

$('#manage-form').validate({ 
    rules: {
        business_Name: {
            required: true,
            rangelength:[2,30]
        }
    },
    messages: {
        business_Name: {
            required: "required",
            rangelength : "between 2 to 30"
        }
    }


});
}

当我点击插入按钮时它没有验证，即不显示消息。页面只是刷新，不显示消息。

【问题讨论】：

标签： jquery jquery-mobile jquery-validate

【解决方案1】：

引用 OP：

“页面只是刷新，不显示消息。”

它没有验证，因为你没有正确地初始化插件。由于您将.validate() 方法放在click 处理程序中，因此插件直到在点击之后才被初始化......到那时为时已晚。

您永远不需要在函数、点击处理程序等中调用.validate()。

// the click handler is not needed - delete this...
//$("#submission").on("click", function (evt){
//    handleAddForm();
//    return false;
//});

只需将.validate() 放在 DOM 就绪处理程序中即可正确初始化插件。然后插件将自动捕获提交按钮的点击。

$(document).ready(function() {

    $('#manage-form').validate({  // initializes the plugin
        // your rules and options
    });

});

将pageinit 用于 jQuery Mobile “就绪”事件...

$(document).on('pageinit', function(){

    $('#manage-form').validate({  // initializes the plugin
        // your rules and options
    });

});

【讨论】：