Wijmo UI for the Web
Use Validation
Wijmo User Guide > Widgets > Wizard > Wizard How To > Use Validation
Show All
Hide All

Building on the Quick Start example, you can create a three-panel form with validation using the validating event.

  1. Since we are using Ajax validation, we need to add a reference to the jQuery Plugin within the <head> tags along with the other references.

    Drop down and copy references to paste inside the head tags

    References
    Copy Code 
    <!--jQuery References--> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script>

<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20183.140.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20183.140.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20183.140.js" type="text/javascript"></script>

<!--Ajax jQuery Validation-->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js" type="text/javascript"></script>
  2. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which does the following:
    • Initializes the widget and contains the validating function.
    • Adds the activeIndexChanged function to change the Next button to a Submit button on the final page.
    • Allows users to click the step headers to change panels using the show method.

    Drop down and copy script to paste in <head> section

    Script
    Copy Code 
    <script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
    var $validator = $("#signupform").validate();
         
    $('#pages').wijwizard({
        validating: function (e, args) {
        if (args.nextIndex < args.index) return true;
         
        $("#signupform").valid();
         
        var elements = $validator.invalidElements();
        if (elements.length === 0) return true;
         
        var isValid = false;
        $.each(elements, function (i, ele) {
          if ($.contains(args.panel, ele)) {
                isValid = true;
                return false;
            }
        });
        return !isValid;
        },
    activeIndexChanged: function(e, data){
        var w = $(this).data("wijmoWijwizard"),
            nb = w.nextBtn;
        if (data.index === w.count() - 1){
          nb.removeClass(".ui-state-disabled").bind("click.submit", function(){
            $("form").submit();
          }).find(".ui-button-text").text("submit");
        }else{
          nb.find(".ui-button-text").text("next");
        }
       }
    });
    $('li.ui-widget-header').each(function (index, elem) {
       $(elem).click(function (args) {
          var stepIndex = $('li.ui-widget-header').index(elem);
       $('#pages').wijwizard("show", stepIndex);
        });
    });
});
</script>
  3. In the <body> section of your HTML file, replace the basic wizard markup with the following, which creates a wizard with three pages of form inputs.

    Drop down and copy script to paste in <head> section

    Markup
    Copy Code 
    <form id="signupform">
    <div id="pages">
        <ul>
            <li><a href="#logindata">Login data</a></li>
            <li><a href="#personaldata">Personal data</a></li>
            <li><a href="#subscriptions">Subscriptions</a></li>
        </ul>
        <div id="logindata">
            <p>
                <label for="username">Username</label>
                <input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
            </p>
            <p>
                <label for="email">Email address</label>
                <input id="email" name="email" class="required email" type="text" />
            </p>
            <p>
                <label for="password">Password</label>
                <input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
            </p>
            <p>
                <label for="confirmpassword">Confirm Password</label>
                <input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
            </p>
        </div>
        <div id="personaldata">
            <p>
                <label for="street">Street</label>
                <input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
            </p>
            <p>
                <label for="city">City</label>
                <input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
            </p>
        </div>
        <div id="subscriptions">
            <p>
                <label for="weekly">Weekly Newsletter</label>
                <input id="weekly" name="weekly" type="checkbox" />
            </p>
            <p>
                <label for="updates">Product Updates</label>
                <input id="updates" name="updates" type="checkbox" />
            </p>
            <p>
                <label for="terms">Terms and conditions</label>
                <input id="terms" name="terms" class="required" type="checkbox" />
            </p>
        </div>
    </div>    
</form>
  4. Save your HTML file and open it in a browser. The widget appears like the one in the live widget below, with the WizardValidation.
See Also
Wizard How To

Reference

add Method
activeIndexChanged Event
validating Event

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page