validating form with multiple form tag using bootstrap formvalidators

Question

I have a form with some fields, and also another form inside the same form , I want to validate upper form and inner form respectively, for eg:

<form name="upperFORM" ID="upperFORM" >
              <div class="form-control-group">
                <label class="control-label" for="email">Email Address</label>
                <div class="controls">
                  <input type="text" class="input-xlarge" name="email" id="email">
                </div>
              </div>
              <div class="form-control-group">
                <label class="control-label" for="message">Your Address</label>
                <div class="controls">
                  <textarea class="input-xlarge" name="address" id="address" rows="3"></textarea>
                </div>
              </div>
    <form name="innerForm" id="innerForm" >
     <div class="form-control-group">
                <label class="control-label" for="name">Your Name</label>
                <div class="controls">
                  <input type="text" class="input-xlarge" name="name" id="name">
                </div>
              </div>

              <div class="form-control-group">
                <label class="control-label" for="name">User Name</label>
                <div class="controls">
                  <input type="text" class="input-xlarge" name="username" id="username">
                </div>
              </div>
    </form>

</form>

jquery validation:

$('#upperFORM').validate({
    rules: {
        email: {
            required: true,
            required: true
        },

        address: {
            minlength: 6,
            required: true
        }



    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element
        .text('OK!').addClass('valid')
        .closest('.control-group').removeClass('error').addClass('success');
    }
});

    $('#innerForm').validate({
        rules: {
            name: {
                required: true,
                required: true
            },

            username: {
                minlength: 6,
                required: true
            }



        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element
            .text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        }
    });

the above code is not working,please help

Sparky · Accepted Answer · 2015-02-10 16:06:48Z

I have a form with some fields, and also another form inside the same form , I want to validate upper form and inner form respectively.

<form name="upperFORM" ID="upperFORM" >
    ....
    <form name="innerForm" id="innerForm" >
        ....
    </form>
</form>

You cannot and should not do this.

The jQuery Validate plugin will not be able to properly handle a <form> inside of a <form>. It was written to work with valid HTML markup.
It's invalid HTML. There is no such thing as having a nested form.
It really makes no sense. There is no good reason to have a nested form.

You never explained what you're trying to accomplish by nesting form containers, but the only way jQuery Validate will work on these is by separating the two.

<form name="upperFORM" ID="upperFORM" >....</form>

<form name="innerForm" id="innerForm" >....</form>

Whatever it is that you're trying to accomplish by nesting two forms, could likely be accomplished better through other means.

Collectives™ on Stack Overflow

validating form with multiple form tag using bootstrap formvalidators

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related