.validate（）在jQuery Mobile中不起作用

這是我第一次使用插件和.validate（）方法。現在我有一個表單，每次單擊提交按鈕時，它都會執行表單驗證。這裏是我的代碼：.validate（）在jQuery Mobile中不起作用

<form class="form d" method="post" action=""> 
       <input type="text" name="searchtitle" id="searchtitle" placeholder="Enter the textbook's title"> 
       <input type="text" name="searchauthor" id="searchauthor" placeholder="Enter the textbook's author"> 
       <input type="text" name="searchpublisher" id="searchpublisher" placeholder="Enter the textbook's Publisher"> 
       <input type="text" name="searchedition" id="searchedition" placeholder="Enter the textbook's edition"> 
       <select name="searchuniversity" id="searchuniversity"></select> 
       <select name="searchuniversitycampus" id="searchuniversitycampus" ></select> 
       <input type="submit" id ="searchsubmit" name="searchsubmit" value="Search"> 
      </form>

然後我有以下的Javascript：

$(document).on('pageinit',"#searchpage", 
    //this funciton will carry out the things we need to do to carry out our search 
    function(e) 
     { 
      e.preventDefault(); 

      $(".form.d").validate({ 
       rules: { 
        name: { 
        required: true 
        }, 
        email: { 
        required: true, 
        email: true 
        }, 
        comments: { 
        required: true, 
        minlength: 5, 
        nourl: true 
        } 
       }, 
       messages: { 
        name: "Required Field", 
        email: "Valid Email Required", 
        comments: "Required Field + No URL's" 
       } 
      });   


      $("#searchsubmit").click(
        function(e) 
        { 
              //Do a lot of processing here 
             }); 
});

就像我說的，我很新的做形式上的驗證和使用功能。

Here是一個jsFiddle的問題。當你點擊小提琴中的提交時，它會提醒「你好」，然後進行驗證。如何阻止這種情況發生。即先驗證第一個，然後運行該函數？

來源

2013-07-08 user481610

什麼叫「不工作」是什麼意思？任何JS錯誤？ – Raptor

那麼當我點擊搜索按鈕時，它會運行$（「＃searchsubmit」）。click（）;函數而不是驗證表格 – user481610

使用'id'作爲你的表單並將其分配給'.validate（）' – Raptor

您的整個問題是您的click處理程序。該插件已經內置回調函數，將捕獲提交按鈕的click事件。當表單有效時使用submitHandler來激活一個函數。當表單無效時使用invalidHandler來激活一個函數。

你已經有submitHandler回調在你的jsfiddle所以我重構你的jsfiddle代碼如下：

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

    $('#myform').validate({ // initialize the plugin 
     rules: { 
      field1: { 
       required: true 
      }, 
      field2: { 
       required: true 
      } 
     }, 
     submitHandler: function (form) { 
      alert("hello"); // stuff to do when form is valid 
      alert('valid form submitted'); // for demo 
      return false; 
     }, 
     invalidHandler: function() { 
      // stuff to do when form is invalid 
      alert("invalid form"); // for demo 
     } 
    }); 

    // remove click handler 
    // use the plugin's built-in callback functions instead 
    //$("#test").click(function(){alert("hello")}); 

});

DEMO：http://jsfiddle.net/BTwaP/1/

See documentation for all callback functions

編輯：

As of jQuery Mobile version 1.4, the pageinit event has been deprecated and replaced with pagecreate。

很好的參考：https://stackoverflow.com/a/14469041/594235

來源

2013-07-08 14:55:55 Sparky

非常感謝你這麼棒的答覆！ – user481610

.validate（）在jQuery Mobile中不起作用

回答

相關問題