0

我想在我的 phonegap jQuery mobile App 中进行表单验证。但是当我按下提交按钮时，即使有空字段验证也不起作用，这是为什么呢？我的代码有什么错误？以及我如何验证单选按钮

我已经在互联网上搜索了有关验证的信息，并且我使用了相同的方式，但问题没有解决

请帮我 ...

提前致谢。

这是我的代码：

索引.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;
    }



    });



      }
4

2 回答 2

0

When the input is empty, the value is not null but is an empty string. You can test it's value in the console if you are using chrome developer tools, firebug, etc.

于 2013-10-07T19:40:08.970 回答
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
}
于 2013-10-07T12:06:53.733 回答