jQuery Mobile的驗證不工作，即不顯示驗證信息

Question

我試圖驗證這種形式：

<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" 
     } 
    } 


}); 
} 

它沒有驗證，當我點擊插入按鈕即不顯示消息。 頁面只刷新並且不顯示消息。

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

});