CODEWITHSUNDEEP
jqueryumbracojquery-validate
Mahesh KP
Mahesh KP

Reputation: 6446

Jquery validation on container.validate() instead of form.validate()

we are building a new umbraco website, which contains many registration forms and we are using Jquery validation plugin to validate these forms.

Since each usercontrol(macro) contains server tags we have to use one form in each usercontrol to get the JQuery validation to work.

But since we are using one form in each usercontrol, we can't add multiple controls in a page.

What we want to do is add a form tag with runat="server" in master page and then do all the validation with some container.validate(); instead of form.validate().

ie something like this

<script type="text/javascript>

    $('#regForm').validate();

</script>


<div id="regForm">

  <input type="text" class="required" name="Name" id="txtName" runat="server"/>

</div>

Upvotes: 2

Views: 1875

Answers (3)

B2K
B2K

Reputation: 2611

This is a late answer, but seeing that none of the existing answers were accepted, here is my take on this. I just ran into a similar situation where I needed to validate a div contained in a form for a modal dialog. Here is how I solved it.

<script type="text/javascript>
  jQuery(function($) {
    $('form').validate();

    $('.continue').click(function() {
        var isValid = true;
        var $div = $(this).closest("div");
        $div.find(":input").each( function() {
           isValid = $(this).valid() && isValid;
        });
        if ( isValid ) {
           var $next = $div.hide().next('div');
           if ( $next.length == 0 ) {
              $(form).submit();
           } else {
              $next.show();
           }
        }
    });
  });
</script>

<form action="#">
    <div id="div1">
       <input type="text" required name="Name" id="txtName"        runat="server"/>
       <button class="continue">Continue</button>
    </div>
    <div id="div2">
       <input type="text" required name="Address" id="txtAddress" runat="server"/>
       <input type="text" required name="City" id="txtCity" runat="server"/>
       <input type="text" required name="State" id="txtState" runat="server"/>
       <input type="text" required name="Zip" id="txtZip" runat="server"/>
       <button class="continue">Continue</button>
    </div>
</form>

Upvotes: 1

Sparky
Sparky

Reputation: 98748

The Validation plugin needs the various fields that it's going to be validating to be contained within a set of <form></form> tags.

http://rocketsquared.com/wiki/Plugins/Validation

However, you can do validation without having to "submit" the form. It can still be achieved with the onkeyup: or onfocusout: handlers for an example.

So if you can simply change your <div id="regForm"> into something like <form id="regForm" ... >, you'll then be able to validate.

EDIT:

For HTML 4, the only required form attribute is action, so there's no reason you can't just replace your <div id="regForm"> </div> with this...

<form id="regForm" action="#"> </form>

Upvotes: 1

Gary.S
Gary.S

Reputation: 7131

By default asp.net can only have one form with runat="server". You can however have multiple forms on the page as Sparky's answer shows. More info on multiple forms in asp.net can be found here: http://msdn.microsoft.com/en-us/magazine/cc164151.aspx.

Upvotes: 0

Related Questions