Phonegap和jQueryMobile中的表单验证无效

Question

I want to make a form validation in my phonegap , jQuery mobile App. 我想在我的phonegap（jQuery移动应用程序）中进行表单验证。 But when i press on submit button even if there is empty fields the validation didn't work , why is that ? 但是当我按下提交按钮时，即使有空白字段，验证也不起作用，为什么呢？ what is the error in my code? 我的代码有什么错误？ and how i can validate radio buttons 以及如何验证单选按钮

i have searched over the internet about validation and i have used the same way but the problem didn't solved 我已经在互联网上搜索了有关验证的信息，并且使用了相同的方法，但是问题并未解决

please help me ... 请帮我 ...

Thanks in advance. 提前致谢。

this my code : 这是我的代码：

index.html 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 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;
    }



    });



      }

Answer 1

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
}

Answer 2

When the input is empty, the value is not null but is an empty string. 当输入为空时，该值不为null，而是一个空字符串。 You can test it's value in the console if you are using chrome developer tools, firebug, etc. 如果您使用的是chrome开发人员工具，firebug等，则可以在控制台中测试其价值。

Phonegap和jQueryMobile中的表单验证无效

问题描述

2 个解决方案

解决方案1
0 2013-10-07 12:06:53

解决方案2
0 2013-10-07 19:40:08

Phonegap和jQueryMobile中的表单验证无效

问题描述

2 个解决方案

解决方案1 0 2013-10-07 12:06:53

解决方案2 0 2013-10-07 19:40:08

解决方案1
0 2013-10-07 12:06:53

解决方案2
0 2013-10-07 19:40:08