javascript - Multi page webform validation -
problem:
i have created webform in business catalyst have customized have multiple instances of on static page.
first created several divs contain parts of form:
<form name="catwebformform23079" method="post" onsubmit="return checkwholeform23079(this)" enctype="multipart/form-data" action="/formprocessv2.aspx?webformid=446040&oid={module_oid}&otype={module_otype}&eid={module_eid}&cid={module_cid}"> <span class="req">*</span> required {module_ccsecurity} <div class="web1"><label for="cat_custom_1433316">arrival <span class="req">*</span> </label> <br /> <input type="text" name="cat_custom_1433316" id="dpd1" class="cat_textbox" readonly="readonly" onfocus="displaydatepicker('cat_custom_1433316');return false;" /> <label for="cat_custom_1433317">departure <span class="req">*</span> </label> <br /> <input type="text" name="cat_custom_1433317" id="dpd2" class="cat_textbox" readonly="readonly" onfocus="displaydatepicker('cat_custom_1433317');return false;" /> <label for="cat_custom_1433318">bedrooms: <span class="req">*</span> </label> <br /> <select name="cat_custom_1433318" id="cat_custom_1433318" style="width:100%;" style="width:100%;" class="pretty-select"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <label for="cat_custom_1433319">adults <span class="req">*</span> </label> <br /> <select name="cat_custom_1433319" id="cat_custom_1433319" style="width:100%;" class="pretty-select"> <option value=""></option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></div> <div class="web2"> <label for="cat_custom_1433320">children <span class="req">*</span> </label> <br /> <select name="cat_custom_1433320" id="cat_custom_1433320" style="width:100%;" class="pretty-select"> <option value=""></option> <option value="yes">yes</option> <option value="no">no</option> </select> <label for="cat_custom_1433321">pets <span class="req">*</span> </label> <br /> <select name="cat_custom_1433321" id="cat_custom_1433321" style="width:100%;" class="pretty-select"> <option value=""></option> <option value="yes">yes</option> <option value="no">no</option> </select> <label for="cat_custom_1433324">parking <span class="req">*</span> </label> <br /> <select name="cat_custom_1433324" id="cat_custom_1433324" style="width:100%;" class="pretty-select"> <option value=""></option> <option value="yes">yes</option> <option selected="selected" value="no">no</option> </select> </div> <div class="web3"><label for="cat_custom_1433322">name <span class="req">*</span> </label> <br /> <input type="text" maxlength="4000" name="cat_custom_1433322" id="cat_custom_1433322" class="cat_textbox" /> <label for="cat_custom_1433323">surname <span class="req">*</span> </label> <br /> <input type="text" maxlength="4000" name="cat_custom_1433323" id="cat_custom_1433323" class="cat_textbox" /> <label for="workphone">work phone number <span class="req">*</span> </label> <br /> <input type="text" name="workphone" id="workphone" class="cat_textbox" maxlength="255" /> <label for="emailaddress">email address <span class="req">*</span> </label> <br /> <input type="text" name="emailaddress" id="emailaddress" class="cat_textbox" maxlength="255" /> <input class="cat_button" type="submit" value="submit" id="catwebformbutton" /> </div> <script type="text/javascript" src="/catalystscripts/validationfunctions.js?vs=b1677.r461496-phase1"></script> <script type="text/javascript" src="/catalystscripts/java_datepicker.js?vs=b1677.r461496-phase1"></script> <script type="text/javascript"> //<![cdata[ var submitcount23079 = 0; function checkwholeform23079(theform) { var why = ""; if (theform.workphone) why += isempty(theform.workphone.value, "work phone number"); if (theform.emailaddress) why += checkemail(theform.emailaddress.value); if (theform.cat_custom_1433316) why += checkdate(theform.cat_custom_1433316.value, "arrival"); if (theform.cat_custom_1433317) why += checkdate(theform.cat_custom_1433317.value, "departure"); if (theform.cat_custom_1433318) why += checkdropdown(theform.cat_custom_1433318.value, "bedrooms:"); if (theform.cat_custom_1433319) why += checkdropdown(theform.cat_custom_1433319.value, "adults"); if (theform.cat_custom_1433320) why += checkdropdown(theform.cat_custom_1433320.value, "children"); if (theform.cat_custom_1433321) why += checkdropdown(theform.cat_custom_1433321.value, "pets"); if (theform.cat_custom_1433324) why += checkdropdown(theform.cat_custom_1433324.value, "parking"); if (theform.cat_custom_1433322) why += isempty(theform.cat_custom_1433322.value, "name"); if (theform.cat_custom_1433323) why += isempty(theform.cat_custom_1433323.value, "surname"); if (why != "") { alert(why); return false; } if (submitcount23079 == 0) { submitcount23079++; theform.submit(); return false; } else {orm.cat_custom_1433321) why alert("form submission in progress."); return false; } } //]]> </script> as can see website broken down 3 parts: .web1 .web2 .web3
i have buttons #hide1 #hide2 hide , replace .web1 , .web2
// javascript document $('#hide').click(function(){ if($.trim($('.web1 :input').val()) == ''){ $.each().alert('please fill fields.'); } else { $(".web1").hide(); $(".web2").show(); $("#hide").hide(); $("#hide2").show(); } } ); // javascript document $('#hide2').click(function(){ if($.trim($('.web2 :input').val()) == ''){ $.each().alert('please fill fields.'); } else { $(".web2").hide(); $(".web3").show(); $("#hide2").hide(); } } ); $('.web2').hide(); $('.web3').hide(); $('#hide2').hide(); as can tell code when click buttons suppose validate input values within div before proceed next div.
i tried seems not validate of form inputs. on how can solve problem?
Comments
Post a Comment