javascript - form validation in phonegap & jQueryMobile didnt work -
i want make form validation in phonegap , jquery mobile app. when press on submit button if there empty fields validation didn't work , why ? error in code? , how can validate radio buttons
i have searched on internet validation , have used same way problem didn't solved
please me ...
thanks in advance.
this code :
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 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; } }); }
use code in 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(); , use this: if((vmedname ==null) || (vmedname == " ") || (vmedname == undefined) ){ // code }
Comments
Post a Comment