表單驗證在phonegap和jQueryMobile沒有工作

我想在我的手機，jQuery手機應用程序中進行表單驗證。但是當我按下提交按鈕，即使有空字段驗證不起作用，爲什麼呢？我的代碼中有什麼錯誤？和我如何可以驗證單選按鈕表單驗證在phonegap和jQueryMobile沒有工作

我已搜查過有關驗證互聯網和我用同樣的方式，但問題並沒有解決

請幫我...提前

謝謝。

這是我的代碼：

的index.html

<!DOCTYPE html> 


    <html> 

    <head> 

    <meta charset="utf-8" /> 

    <meta name="format-detection" content="telephone=no" /> 

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,     minimum-scale=1, width=device-width, 
     height=device-height, target-densitydpi=device-dpi" /> 

     <link rel="stylesheet" type="text/css" href="css/index.css" /> 
     <link rel="stylesheet" href="css/color.css"> 
     <script src="js/jquery-1.8.2.min.js"></script>  
     <link href="css/jquery.mobile-1.3.2.min.css"  rel="stylesheet" type="text/css" /> 
     <script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="phonegap.js"></script> 
     <script type="text/javascript" src="js/index.js"></script> 
     </head> 

     <body> 


    <div data-role="page" id="NewReminder" > 

     <div data-role="header" data-position="fixed" data-theme="b" > 
      <img src="www\css\images\title_bar.png " /> 
     </div> 

     <div data-role="content"> 

     <form id="RminderInfo_Form" > 

     <ul data-role="listview" data-inset="true"  id="RminderInfo_FormList" > 

      <li> 
      <div data-role="fieldcontain" > 
      <input type="text" name="MedName" id="MedName" size="35" /> 
      <label for="MedName"  id="MedName_Label" > medicine name</label> 
      </div> 
      </li> 


      <li> 

      <div  class="ui-grid-a"> 

      <div  class="ui-block-a"> 
      <input type="radio" id="after" name="after" /> 
      <label for="after" > after meal </label> 
      </div> 

      <div class="ui-block-b"> 
      <input type="radio"  name="before " id="before" value="before meal" /> 
      <label for="before" > before meal</label> 
      </div > 
      </li> 

      <li> 

      <div data-role="fieldcontain" > 

      <input type="number" name="Dailytake_Times" id="Dailytake_Times"  style="width:3px;" /> 
      <label for="Dailytake_Times"  data-inline="true"  id="Dailytake_TimesLabel"> number of doases</label> 

      </div> 
      </li> 

      <li id="doases" style="display:none;" > 

      </li> 

      <li> 
      <fieldset> 
      <legend ><h2 > medicine type </h2></legend> 

     <input type="radio" id="Capsule" name="Capsule" /> 
     <label for="Capsule" >Capsule</label> 

     <input type="radio"  name="Spray " id="Spray" /> 
     <label for="Spray" > spray</label> 

     <input type="radio"  name="Diameter " id="Diameter" /> 
     <label for="Diameter" > diameter</label> 

     <input type="radio"  name="salve " id="salve" /> 
     <label for="salve" > salve</label> 

     </fieldset> 
     </li> 
     <li  style="display:none;" > 
     <div id="Medicine_quant" > 

     <div data-role="fieldcontain" > 

     <input type="number" name="MedQuantity" id="MedQuantity" /> 
     <label for="MedQuantity" id="MedQuantity_Label" > medicine quantity</label> 

     </div> 
     </div> 

     </li> 
     <li> 
     <div data-role="fieldcontain" > 

     <input type="date" name="Med_ExpireDate" id="Med_ExpireDate" /> 
     <label for="Med_ExpireDate" data-inline="true" id="Med_ExpireDateLabel"> medicine expire date </label> 

     </div> 
     </li> 
     <li> 

     <input type="submit"  data-theme="a"  data-inline="true" value=" save "/> 
     </li> 
     </ul> 
     </form> 
     </div> 
     </div> 
     </body> 

     </html>

index.js

 document.addEventListener('deviceready', onDeviceReady, false); 

    function onDeviceReady() { 

    VMedName = $('#MedName'); 
    VMedQuantity = $('#MedQuantity'); 
    VDailytake_Times = $('#Dailytake_Times'); 
    VMedQuantity = $('#MedQuantity'); 
    VMed_ExpireDate = $('#Med_ExpireDate'); 

    MedNameLabel = $('#MedName_Label'); 
    DailytakeTimesLabel = $('#Dailytake_TimesLabel'); 
    MedQuantityLabel = $('#MedQuantity_Label'); 
    MedExpireDateLabel = $('#Med_ExpireDateLabel'); 

    var MISSING = "missing"; 


    $('#RminderInfo_Form') .submit(function(){ 

     var err = false; 

    // Reset the previously highlighted form elements// 

    MedNameLabel.removeClass(MISSING); 
    DailytakeTimesLabel.removeClass(MISSING); 
    MedQuantityLabel .removeClass(MISSING); 
    MedExpireDateLabel.removeClass(MISSING);   

    // Perform form validation// 


    if(VMedName.val()==null||VMedName.val()== " "){ 
     MedNameLabel.addClass(MISSING); 
     err = true; 
    } 

    if(VMedQuantity.val()==null||VMedQuantity.val()== " "){ 
     MedQuantityLabel.addClass(MISSING); 
     err = true; 
    } 

    if(VDailytake_Times.val()==null||VDailytake_Times.val()== " "){ 
     DailytakeTimesLabel.addClass(MISSING); 
     err = true; 
    } 

    if(VMed_ExpireDate.val()==null||VMed_ExpireDate.val()== " "){ 
     MedExpireDateLabel.addClass(MISSING); 
     err = true; 
    } 



    }); 



     }

來源

2013-10-07 user

嘗試使用更新後的代碼，您還需要在提交地點使用正常按鈕，然後表單將在完成驗證時提交在其他情況下，你添加提交表格與觸發功能的幫助... gud運氣 – Anup

Use your code in this format:  

    var VMedName = $('#MedName').val(); 
    var VMedQuantity = $('#MedQuantity').val(); 
    var VDailytake_Times = $('#Dailytake_Times').val(); 
    var VMedQuantity = $('#MedQuantity').val(); 
    var VMed_ExpireDate = $('#Med_ExpireDate').val(); 

    var MedNameLabel = $('#MedName_Label').val(); 
    var DailytakeTimesLabel = $('#Dailytake_TimesLabel').val(); 
    var MedQuantityLabel = $('#MedQuantity_Label').val(); 
    var MedExpireDateLabel = $('#Med_ExpireDateLabel').val(); 



    and use like this: 



    if((VMedName ==null) || (VMedName == " ") || (VMedName == undefined)){ 
     // your code 
}

來源

2013-10-07 12:06:53 Anup

謝謝你試圖幫助我，我試過了，但問題仍然..驗證不起作用 – user

出現什麼錯誤，使用警報尋找錯誤，我認爲與提交表單使用觸發功能提交表單的問題.. – Anup

也使用總是很短的方法，就像你寫在一個冗長的方式和問題可以在這裏也使用這個：$（「.MISSING」）。removeClass（「MISSING 「）; – Anup

當輸入爲空，則值不爲空但是是一個空字符串。如果您使用的是Chrome開發人員工具，螢火蟲等，您可以在控制檯中測試它的值。

來源

2013-10-07 19:40:08 user1129360

表單驗證在phonegap和jQueryMobile沒有工作

回答

相關問題