Improve basic form example

Author: Rafael J. Staib

basic-form.html

@@ -35,7 +35,13 @@ <h2>A powerful jQuery wizard plugin that supports accessibility and HTML5.</h2>
                     <script>
                         $(function ()
                         {
-                            $("#form").validate();
+                            $("#form").validate({
+                                rules: {
+                                    confirm: {
+                                        equalTo: "#password"
+                                    }
+                                }
+                            });
 
                             $("#wizard").steps({
                                 headerTag: "h4",
@@ -50,12 +56,16 @@ <h2>A powerful jQuery wizard plugin that supports accessibility and HTML5.</h2>
                                 {
                                     $("#form").validate().settings.ignore = ":disabled";
                                     return $("#form").valid();
+                                },
+                                onFinished: function (event, currentIndex)
+                                {
+                                    alert("Submitted!");
                                 }
                             });
                         });
                     </script>
 
-                    <h3>Basic Example</h3>
+                    <h3>Basic Form Example</h3>
                     <form id="form" action="#">
                         <div id="wizard">
                             <h4>Account</h4>
@@ -71,27 +81,29 @@ <h4>Account</h4>
 
                             <h4>Profile</h4>
                             <section>
-                                <p>Donec mi sapien, hendrerit nec egestas a, rutrum vitae dolor. Nullam venenatis diam ac ligula elementum pellentesque. 
-                                    In lobortis sollicitudin felis non eleifend. Morbi tristique tellus est, sed tempor elit. Morbi varius, nulla quis condimentum 
-                                    dictum, nisi elit condimentum magna, nec venenatis urna quam in nisi. Integer hendrerit sapien a diam adipiscing consectetur. 
-                                    In euismod augue ullamcorper leo dignissim quis elementum arcu porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
-                                    Vestibulum leo velit, blandit ac tempor nec, ultrices id diam. Donec metus lacus, rhoncus sagittis iaculis nec, malesuada a diam. 
-                                    Donec non pulvinar urna. Aliquam id velit lacus.</p>
+                                <label for="name">First name *</label><br>
+                                <input id="name" name="name" type="text" class="required"><br>
+                                <label for="surname">Last name *</label><br>
+                                <input id="surname" name="surname" type="text" class="required"><br>
+                                <label for="email">Email *</label><br>
+                                <input id="email" name="email" type="text" class="required email"><br>
+                                <label for="address">Address</label><br>
+                                <input id="address" name="address" type="text"><br>
+                                <p>(*) Mandatory</p>
                             </section>
 
-                            <h4>Confirm</h4>
+                            <h4>Hints</h4>
                             <section>
-                                <p>Morbi ornare tellus at elit ultrices id dignissim lorem elementum. Sed eget nisl at justo condimentum dapibus. Fusce eros justo, 
-                                    pellentesque non euismod ac, rutrum sed quam. Ut non mi tortor. Vestibulum eleifend varius ullamcorper. Aliquam erat volutpat. 
-                                    Donec diam massa, porta vel dictum sit amet, iaculis ac massa. Sed elementum dui commodo lectus sollicitudin in auctor mauris 
-                                    venenatis.</p>
+                                <ul>
+                                    <li>Foo</li>
+                                    <li>Bar</li>
+                                    <li>Foobar</li>
+                                </ul>
                             </section>
 
                             <h4>Finish</h4>
                             <section>
-                                <p>Quisque at sem turpis, id sagittis diam. Suspendisse malesuada eros posuere mauris vehicula vulputate. Aliquam sed sem tortor. 
-                                    Quisque sed felis ut mauris feugiat iaculis nec ac lectus. Sed consequat vestibulum purus, imperdiet varius est pellentesque vitae. 
-                                    Suspendisse consequat cursus eros, vitae tempus enim euismod non. Nullam ut commodo tortor.</p>
+                                <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
                             </section>
                         </div>
                     </form>

index.html

@@ -40,6 +40,8 @@ <h3>Overview</h3>
                         <li><a href="basic-form.html">Basic Form Example</a></li>
                         <li>Advanced Form Example</li>
                         <li><a href="add-remove.html">Dynamic Manipulation Example</a></li>
+                        <li>Pagination Example</li>
+                        <li>Use as Tab Component Example</li>
                     </ul>
 
                     <h3>Features</h3>