Databases
StackOverflow2013
Postsdbo
POValidating HTML input elements inside a DIV (visible wizard step) which is inside a FORM?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POValidating HTML input elements inside a DIV (visible wizard step) which is inside a FORM?
    primarykey
    data
    text
    <p>I have decided to create a wizard form in HTML 5 (actually using ASP.NET MVC here). I have the following HTML form:</p> <pre><code>@using (Html.BeginForm()) { &lt;div class="wizard-step"&gt; &lt;input type="text" name="firstname" placeholder="first name" /&gt; &lt;/div&gt; &lt;div class="wizard-step"&gt; &lt;input type="text" name="lastname" placeholder="last name" /&gt; &lt;/div&gt; &lt;div class="wizard-step"&gt; &lt;input type="text" name="suffix" placeholder="suffix" /&gt; &lt;/div&gt; &lt;button class="back-button" type="button"&gt; Back&lt;/button&gt; &lt;button class="next-button" type="button"&gt; Next&lt;/button&gt; } </code></pre> <p>Then I have this js script:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function () { var $steps = $(".wizard-step"); var index = 0; var count = $steps.length; $steps.each(function () { $(this).hide(); }); $(".back-button").attr("disabled", "disabled"); var $currentStep = $steps.first(); $currentStep.show(); $currentStep.addClass("current-step"); $(".back-button").click(function () { $currentStep.hide(); $currentStep.removeClass("current-step"); $currentStep = $currentStep.prev(); $currentStep.addClass("current-step"); $currentStep.show(); index--; $(".next-button").removeAttr("disabled"); if (index == 0) { $(this).attr("disabled", "disabled"); } else { $(this).removeAttr("disabled"); } }); $(".next-button").click(function () { var $inputFields = $(".current-step :input"); var hasError = false; $inputFields.each(function () { if (!validator.element(this)) { hasError = true; } }); if (hasError) return false; index++; $(".back-button").removeAttr("disabled"); if (index == count - 1) { $(this).attr("disabled", "disabled"); } else { $(this).removeAttr("disabled"); } $currentStep.hide(); $currentStep.removeClass("current-step"); $currentStep = $currentStep.next(); $currentStep.addClass("current-step"); $currentStep.show(); }); }); &lt;/script&gt; </code></pre> <p>Basically, what I want is upon clicking the Next button, it will validate the input elements found inside the current visible DIV, not the entire FORM. Is it possible to do this using HTML5? If not, maybe jQuery?</p> <p>If you have others in mind, please do share it here. Many many thanks!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjerbersoft
    1. USjerbersoft
    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.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI have to say, after just a quick glance over your code, it appears that when you click the Next button, it only validates the inputs inside the ".current-step" div, not the entire form. Isn't this what you want?
      singulars
      1. POValidating HTML input elements inside a DIV (visible wizard step) which is inside a FORM?
      1. USjoeltine
    2. COyes, that is what i need. the current script is not working as expected.
      singulars
      1. POValidating HTML input elements inside a DIV (visible wizard step) which is inside a FORM?
      1. USjerbersoft
    3. COI suppose it depends heavily on what `validator.element(this)` does... do you have this code available?
      singulars
      1. POValidating HTML input elements inside a DIV (visible wizard step) which is inside a FORM?
      1. USjoeltine
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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