Databases
StackOverflow2013
Postsdbo
POHow do I validate a form without submitting and go to other page with jquery mobile and Jquery validation?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I validate a form without submitting and go to other page with jquery mobile and Jquery validation?
    text
    copied!<p>So I'm trying to validate a JQM form that has 4 parts and are divided in different pages so after I validate the first part I want to go to the second, if the form it's valid. I'm trying to validate with the JQuery.validate plugin but it doesn't respond in any way with the form.</p> <p>PS:IT MUST BE WITH JQuery.validation plugin</p> <pre><code> &lt;div data-role="page" id="page2" data-add-back-btn="true"&gt; &lt;div data-role="header" data-position="fixed"&gt; &lt;h1 id="page2Header"&gt;&lt;/h1&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;form id="sampleProperties"&gt; &lt;label for="station"&gt;Select Station:&lt;/label&gt; &lt;select name="station" id="station" onBlur="storeData(this.id,this.value)" required="true"&gt; &lt;option value="50028000"&gt;Tanama River&lt;/option&gt; &lt;option value="50010500"&gt;Rio Guajataca, Lares&lt;/option&gt; &lt;option value="60008002"&gt;Example River2&lt;/option&gt; &lt;option value="60008003"&gt;Example River3&lt;/option&gt; &lt;option value="60008004"&gt;Example River4&lt;/option&gt; &lt;/select&gt; &lt;div class="hide"&gt; &lt;div class='suspendedAdditionalFields'&gt; &lt;label for="sampleMediumDropdown"&gt;Select sample medium:&lt;/label&gt; &lt;select name="sampleMediumDropdown" id="sampleMediumDropdown" onBlur="storeData(this.name,this.value)"&gt; &lt;option value="WS"&gt;WS(Surface Water)&lt;/option&gt; &lt;option value="WSQ"&gt;WSQ(Surface Water QC)&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class='bottomAdditionalFields'&gt; &lt;label for="sampleMediumDropdownBottom"&gt;Select sample medium&lt;/label&gt; &lt;select name="sampleMediumDropdown" id="sampleMediumDropdownBottom" onBlur="storeData(this.name,this.value)"&gt; &lt;option value="SB"&gt;SB (bottom material)&lt;/option&gt; &lt;option value="SBQ"&gt;SBQ (bottom material QC)&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;label for="date"&gt;Begin Date:&lt;/label&gt; &lt;input name="date" id="beginDate" type="date" onChange="storeData(this.id,this.value)" /&gt; &lt;div class="hide"&gt; &lt;label for='EVENT'&gt;Hydrologic event:&lt;/label&gt; &lt;select name="EVENT" id="EVENT" onBlur="storeData(this.name,this.value)"&gt; &lt;option value="1"&gt;1- Drought&lt;/option&gt; &lt;option value="2"&gt;2- Spill&lt;/option&gt; &lt;option value="3"&gt;3- Regulated Flow&lt;/option&gt; &lt;option value="4"&gt;4- Snowmelt&lt;/option&gt; &lt;option value="5"&gt;5- Earthquake&lt;/option&gt; &lt;option value="6"&gt;6- Hurricane&lt;/option&gt; &lt;option value="7"&gt;7- Flood&lt;/option&gt; &lt;option value="8"&gt;8- Volcanic activity&lt;/option&gt; &lt;option value="9" selected&gt;9- Routine Sample&lt;/option&gt; &lt;option value="A"&gt;A- Spring breakup&lt;/option&gt; &lt;option value="B"&gt;B- Under ice cover&lt;/option&gt; &lt;option value="C"&gt;C- Glacial lake outbreak&lt;/option&gt; &lt;option value="D"&gt;D- Mudflow&lt;/option&gt; &lt;option value="E"&gt;E- Tidal action&lt;/option&gt; &lt;option value="F"&gt;F- Fire, affected by fire prior sampling&lt;/option&gt; &lt;option value="H"&gt;H- Dambreak&lt;/option&gt; &lt;option value="J"&gt;J- Storm&lt;/option&gt; &lt;option value="K"&gt;K- Backwater&lt;/option&gt; &lt;option value="X"&gt;X- Not applicable&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;div class="ui-grid-a"&gt; &lt;label for="containerCuantity"&gt;Add a group of single container or sets of multiple samples: &lt;/label&gt; &lt;div class="ui-block-a"&gt; &lt;input type="number" min="1" value="1" max="40" id="containerCuantity" name="containerCuantity" onBlur="storeData(this.id,this.value)"/&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt; &lt;select id="singleMultiContainer" name="singleMultiContainer" onChange="storeData(this.id,this.value)"&gt; &lt;option value="" selected&gt;--Select Container or Set--&lt;/option&gt; &lt;option value="single"&gt;Single container sample&lt;/option&gt; &lt;option value="multi"&gt;Multiple sets container&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; &lt;/div&gt; &lt;input id='addSampleParameters'type="submit" value="Next"/&gt; &lt;/form&gt; &lt;/div&gt; &lt;div data-role="footer" data-position="fixed"&gt; &lt;div data-inline="true" data-type="horizontal"&gt;&lt;a href="#" data-icon="bars" data-iconpos="notext" data-inline="true" data-mini="false" data-role="button"&gt;Menu&lt;/a&gt;&lt;a id="addSampleParameters" data-icon="arrow-r" data-iconpos="right" data-inline="true" data-role="button" data-mini="false" data-theme="e"&gt;Next&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The js:</p> <pre><code>$('#page2').bind('pageinit',function(){ $('#sampleProperties').validate({ rules:{ station: 'required', date: 'required', singleMultiContainer: 'required', containerCuantity:{ required:'true', minlength:1, maxlength:40 } }, submitHandler: function(form) { alert('Success!'); } }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload