在phonegap中进行表单验证; jQuery Mobile没有用

时间:2013-10-07 11:42:44

标签: javascript jquery-mobile cordova

我想在我的phonegap jQuery移动应用程序中进行表单验证。但是当我按下提交按钮时,即使有空字段,验证也不起作用,为什么呢?  我的代码中的错误是什么?以及我如何验证单选按钮

我在互联网上搜索了有关验证的问题,我使用了相同的方法,但问题没有解决

请帮帮我......

提前致谢。

这是我的代码:

的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;
    }



    });



      }

2 个答案:

答案 0 :(得分:0)

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
}

答案 1 :(得分:0)

当输入为空时,该值不为null,而是一个空字符串。 如果您使用的是chrome开发工具,firebug等,则可以在控制台中测试它的值。