Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Lets assume you have a form named <code>myform</code> housing all your textboxes. Lets also assume that the button with the class <code>nextBtn</code> is inside this form, and triggers the submit behavior for the form. </p> <p>Like you did , validating the form on the <code>click</code> event of the submit button is fine.However, you'd want to move to the next page only if all the validations pass, so , you should probably leave the redirecting part till the end, by which time you would have determined the results of the validation checks. After that, all that is left to do is </p> <ol> <li>Set the action attribute of 'myform` to point to the required page.(It redirectes to this page)</li> <li>Return false if the validations fail, or true if they pass from the function handling the click event.</li> </ol> <p>So, your code would look something like</p> <pre><code> $(document).on("pageinit", "#registerPage1", function () { $(".nextBtn").click(function () { var validationPass = true; $(".txt").each(function () { if ($(this).val().length == 0 &amp;&amp; $(this).next().attr('class') != 'nullInputMsg') { ($(this)).after('&lt;div class="nullInputMsg"&gt;this field is required!&lt;/div&gt;'); validationPass = false; } else if ($(this).val().length != 0 &amp;&amp; $(this).next().attr('class') == 'nullInputMsg') $(this).next().remove(); }); return validationPass; }); }); </code></pre> <p>Your HTML should probably look like </p> <pre><code> .... .... &lt;form id="myform" name="myform" action="RedirectToPage.php" method="get"&gt; .... //form content housing the textboxes and button with class .nextBtn .... &lt;/form&gt; .... .... </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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