Member Avatar for rpv_sen

Hi

I was working on wizard registration form i collected the code from web and i gave required in the input tag. But its not working.

Can any one please help me to resolve this issue.

Html page

<div class="row wizard-row">
  <div class="col-md-12 fuelux">
    <div class="block-wizard">
      <div id="wizard1" class="wizard wizard-ux">
        <ul class="steps">
          <li data-target="#step1" class="active">Header Information<span class="chevron"></span></li>
          <li data-target="#step2">Recurrence<span class="chevron"></span></li>
          <li data-target="#step3">Stream Detail<span class="chevron"></span></li>
        </ul>
      </div>
      <div class="step-content">
        <form class="form-horizontal group-border-dashed" action="#" parsley-validate novalidate id="wizard">
          <div class="step-pane active" id="step1">
            <div class="form-group no-padding">
              <div class="col-sm-7">
                <h3 class="hthin">Header Information</h3>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Business Company</label>
              <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="Business Company" required name="bcompany">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-4 control-label">Stream Name</label>
              <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="Stream Name" name="sname">
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-4 col-sm-10">
                <button class="btn btn-default">Cancel</button>
                <button type="submit" data-wizard="#wizard1" class="btn btn-primary wizard-next">Next Step <i class="fa fa-caret-right"></i></button>
              </div>
            </div>
          </div>
          <div class="step-pane" id="step2">
            <div class="form-group no-padding">
              <div class="col-sm-7">
                <h3 class="hthin">Recurrence</h3>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-5 control-label">
                <label class="radio-inline">
                  <input class="icheck" type="radio" value="D" id="daily" name="smethod">
                  Daily </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-5 control-label">
                <label class="radio-inline">
                  <input class="icheck" type="radio" value="W" id="weekly" name="smethod">
                  Weekly </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-5 control-label">
                <button data-wizard="#wizard1" class="btn btn-default wizard-previous"><i class="fa fa-caret-left"></i> Previous</button>
                <button data-wizard="#wizard1" class="btn btn-primary wizard-next">Next Step <i class="fa fa-caret-right"></i></button>
              </div>
            </div>
          </div>
          <div class="step-pane" id="step3">
            <div class="form-group no-padding">
              <div class="col-sm-7">
                <h3 class="hthin">Configuration</h3>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-5 control-label">
                <label class="radio-inline">
                  <input class="icheck" type="radio" value="W" id="weekly" name="smethod">
                  Weekly </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-5 control-label">
                <label class="radio-inline">
                  <input class="icheck" type="radio" value="W" id="weekly" name="smethod">
                  Weekly </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-5 control-label">
                <button data-wizard="#wizard1" class="btn btn-default wizard-previous"><i class="fa fa-caret-left"></i> Previous</button>
                <button data-wizard="#wizard1" class="btn btn-success wizard-next"><i class="fa fa-check"></i> Complete</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
  • 2 Contributors
  • 1 Reply
  • 522 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

Quick summary for (and following ): the HTML5 required attribute can appear to “do nothing” for two common reasons. One, the form has been set up for JavaScript validation or explicitly disables browser validation (so the browser ignores required). Two, most wizard plugins move to the next pane with JS rather than submitting the form, so native validation never runs. Also check for duplicated element IDs (that can break selectors/validation).

If you want a quick, browser-native fix you can either remove novalidate and let the browser validate on submit, or manually test the form before the wizard advances. Example: intercept the wizard “Next” action and call the HTML5 API so the browser shows messages:

// plain JS: prevent step change if form is invalid
document.addEventListener('click', function (e) {
  var btn = e.target.closest('.wizard-next');
  if (!btn) return;
  var form = document.getElementById('wizard'); // adjust to your form ID
  if (!form.checkValidity()) {
    e.preventDefault();
    if (typeof form.reportValidity === 'function') {
      form.reportValidity();
    } else {
      var firstInvalid = form.querySelector(':invalid');
      if (firstInvalid) firstInvalid.focus();
    }
  }
});

If you use a JS validator (Parsley, etc.), initialize and call its validation before advancing. Example for Parsley (v2+):

var parsley = $('#wizard').parsley();
$('.wizard-next').on('click', function (e) {
  if (!parsley.validate()) e.preventDefault();
});

Checklist: remove novalidate to test native behavior; ensure your validator script is loaded and initialized; make wizard navigation buttons type="button" and only submit on the final step; fix duplicate IDs; check the browser console for JS errors. If the problem persists, paste the small HTML + the wizard/validator JS and any console errors so others can reproduce.

Member Avatar for hericles

Firstly, an indication what the problem is beyond "it's not working" would help a lot. As would actual code. You've just given us HTML which isn't a lot of help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.