running jquery validation inside modal and twitterbootstrap wizard?

Question

Hope somebody can help me with this, it's been almost a day now and I still can't figure out how to solve this. Right now I have a button that when click opens a jquery modal dialog, inside the dialog there is a twitterbootstrap wizard that works fine. I can click the next and previous button with no problem, now when I try to implement a jquery validation to it as to the example provided in its documentation it is not working. But if I remove the bootstrap wizard from the dialog and put it in a simple page the validation is working. I don't know if I am missing something or something is wrong with my code. Btw I am doing this in asp.net webform page. Please see below for my codes:

Head Section

<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="prettify.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" />

Body and Jquery Script Section

<form id="form1" runat="server">
        <div id="dialog-form" title="Create new user">

  <form>
  <fieldset>
    <div id="rootwizard">
                            <div class="navbar">
                                <div class="navbar-inner">
                                    <div class="container">
                                        <ul>
                                            <li><a href="#tab1" data-toggle="tab">Login Account Information</a></li>
                                            <li><a href="#tab2" data-toggle="tab">Personal Information</a></li>
                                            <li><a href="#tab3" data-toggle="tab">List of Available Subjects</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-content">
                                <div class="tab-pane" id="tab1">
                                    <asp:TextBox ID="emailfield" runat="server" CssClass="required email"></asp:TextBox>
                                </div>
                                <div class="tab-pane" id="tab2">
                                    2
                                </div>
                                <div class="tab-pane" id="tab3">
                                    3
                                </div>
                                <ul class="pager wizard">
                                    <li class="previous"><a href="#">Previous</a></li>
                                    <li class="next"><a href="#">Next</a></li>
                                </ul>
                            </div>  
                        </div>
  </fieldset>
  </form>

</div>
    <asp:Button ID="createuser" runat="server" Text="Button" />
    </form>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="bootstrap.min.js" type="text/javascript"></script>
    <script src="jquery.bootstrap.wizard.js" type="text/javascript"></script>
    <script src="prettify.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var $validator = $("#form1").validate({
                rules: {
                    emailfield: {
                        required: true,
                        email: true,
                        minlength: 3
                    }
                }
            });

            $('#rootwizard').bootstrapWizard({
                onTabClick: function (tab, navigation, index) {
                    return false;
                },
                'onNext': function (tab, navigation, index) {
                    var $valid = $("#form1").valid();
                    if (!$valid) {
                        $validator.focusInvalid();
                        return false;
                    }
                }
            });
            window.prettyPrint && prettyPrint()
        });

        $(function () {
            $("#dialog-form").dialog({
                autoOpen: false,
                height: 500,
                width: 980,
                modal: true,
                resizable: false,
                draggable: false
            });

            $("#createuser")
            .button()
            .click(function () {
                $("#dialog-form").dialog("open");
            });
        });
    </script>

Thanks

score 0 · Answer 1 · edited May 23 '17 at 10:31

Initial thoughts...

I see you've got a nested form element - i.e a form placed inside another form. I would change that and try again to see if anything changes.

<form id="form1" runat="server">
    <div id="dialog-form" title="Create new user">

  <form>

I suspect this may be the root of the issue as it isn't allowed according to the spec.

4.10.3 The form element

Categories Flow content. Contexts in which this element can be used: Where flow content is expected. Content model: Flow content, but with no form element descendants.

Source

In essence, a call to submit on the inner form will trigger on the outer form - most likely breaking validation, or causing a conflict of some kind.

There's a great topic on the subject here - where someone even quotes a method found in the WebKit source code which only creates a new <form> if it's not directly a child of an existing one.

... Well, kinda.

Having just quickly looked through the examples you've showed me, one thing has jumped out, this is the way the browser is interpreting the mark-up of your form:

<form method="post" action="twitterwizardinsidejquerymodaldialog.aspx" id="form1" novalidate="novalidate">
  <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA3MzQyODM5NGRkGJwy+BJArQAbccGL8gkmxzW56BSXmxDbjmF1Bht/VZc=">
  </div>

  <div class="aspNetHidden">
  <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAANJ+VG2lcl0hLS1uBTEILjay9ZjNWlmWCE+F+bmmsDR55U8pUpLxmspHusBqybX31fKmP5z3oI1K/0xP04OEpQtSyYfoXmQEPT2tZ+zsIIvWQ==">
 </div>
</form>

Somehow the form is getting truncated, meaning that validation does pass - as that input field technically isn't present. (Meaning validation is automatically skipped)

If you open up a web inspector (i.e Google Chrome's Developer Tools) and manually drag the appropriate elements in to the form itself - then validation works perfectly.

By viewing the source of the page you can see the form element closes exactly where you attempt to open a new form:

<form method="post" action="twitterwizardinsidejquerymodaldialog.aspx" id="form1">
  <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTA3MzQyODM5NGRkGJwy+BJArQAbccGL8gkmxzW56BSXmxDbjmF1Bht/VZc=" />
  </div>

  <div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAANJ+VG2lcl0hLS1uBTEILjay9ZjNWlmWCE+F+bmmsDR55U8pUpLxmspHusBqybX31fKmP5z3oI1K/0xP04OEpQtSyYfoXmQEPT2tZ+zsIIvWQ==" />
  </div>
  <div id="dialog-form" title="Create new user">  
<form>

So this means?

It looks pretty clear that the nesting of forms is causing this, and I would try and remove the inner form - without knowing it's purpose it just looks kinda pointless.

If this is the case, then rather than opening a new form element the rendering engine is closing the existing one. This would also explain why placing wizard elsewhere allows it to work.

#FergusMorrow the dialog-form id will be called when I click the button. If I remove the another form tag inside the div dialog-form, the modal dialog will open for a few seconds and then automatically close. — user3317319, Mar 03 '14 at 03:05
Interesting, when you say "its not working" in your original post - what actually happens? Does validation fail or does validation just not occur? — Fergus In London, Mar 03 '14 at 03:13
#FergusMorrow when it is not inside the modal dialog the validation occurs. The next button will stop and display the textboxes with errors. Now when I put the wizard inside the modal dialog the validation will not occur. When I also inspect it with firebug the form tag is missing inside the dialog-form div. Later I'll try to post a jsfiddle for a live demo or paste a link from my page. — user3317319, Mar 03 '14 at 03:20
Yeah, a jsfiddle case would be pretty useful. I mean, if firebug isn't seeing an inner form element then it does appear that it's not creating it, possibly due to nesting. But that still doesn't explain everything, and actually - it should still work as you run validation on ```#form1```; the outer form. — Fergus In London, Mar 03 '14 at 03:29
#FergusMorrow please kindly see the ff link: inside the modal dialog [link](http://mylab.comporg.net/twitterwizardinsidejquerymodaldialog.aspx) outside the modal dialog [link](http://mylab.comporg.net/twitterwizardoutsidejquerymodaldialog.aspx) — user3317319, Mar 03 '14 at 07:02
See updated answer. It is the form nesting that's causing the issue, should be quite easy to fix by simply removing that element from your mark-up. In essence it's breaking the page from being rendered correctly, closing the outer form too early - this then leaves jQuery unable to see any child input elements - so the validation rules are skipped and the wizard continues. — Fergus In London, Mar 03 '14 at 23:52
#FergusMorrow - I think I'll just paste the wizard in a normal page and link it,rather than in a modal dialog. So far all the forums that I know, I have also asked this question but nobody answered it except in this forum. Also those hidden fields that you have said are all created by ASP.NET by default. — user3317319, Mar 04 '14 at 10:04

running jquery validation inside modal and twitterbootstrap wizard?

1 Answers1

Initial thoughts...

... Well, kinda.

So this means?