jQuery Validation Issue with a form inside a form

Question

This is an odd one. I have my setup like so..

<form id="main">
    <input name="title" class="required">
    <form id="searchIngredient">
          <input name="search">
          <input type="submit" name="submit" value="Search">
    <form>
    <input type="submit" name="submit" value="Add New Recipe">
</form>

Now I'm trying to validate just the input's in the #main form using the class="required" however with the second #serachIngredient form within the form, the validation does not work at all.

Incase You Are Wondering: The #searchIngredient form uses ajax to return results and due to the design, it needs to be within the #main form.

I know the jQuery validation works without the #searchIngredient form but once I add it back, it stops working, with no errors.

Any suggested workarounds or tips?

score 9 · Answer 1 · answered Jul 11 '12 at 01:17

9

That's not possible. Nested forms are not supported in HTML.

The start tag for the inner form will be ignored, and the end tag of the inner form will instead end the outer form, leaving the submit button outside the form.

You can have as many forms you like in the page, but not nested inside one another.

answered Jul 11 '12 at 01:17

Guffa

687,336
108
737
1,005

So there's no way to currently do this? I even tried ending the #main form right after title and then using jQuery to make the last submit input (outside of both forms) to submit the #main form but it didn't work. – Braunson Jul 11 '12 at 01:22
@Braunson: The validation uses the `submit` event, right? If you call the `submit` method to post the form, the event is not triggered, so you would have to trigger the event manually. – Guffa Jul 11 '12 at 01:26
I've tried triggering the validation using the submit outside of the form but have had no luck. Since there is quite a few fields, and using element for each is not an idea solution. – Braunson Jul 11 '12 at 01:55
@Braunson: If you call the validation manually, you should be able to validate the entire form, not just one element at a time. – Guffa Jul 11 '12 at 03:09
I tried calling it but receive "TypeError: Object [object Object] has no method 'valid'" – Braunson Jul 11 '12 at 03:23

bassam mohaisen · Answer 2 · 2015-07-19T09:42:42.047

I have the same issue it's because nested form is not supported in html nested form will be ignored, but it look like only first nested form will be ignored so for jquery form validation I tried to add nested after the main form then I add the form I want to validate and it works fine.

<form id="main">
<form>
</from>
    <input name="title" class="required">
    <form id="searchIngredient">
          <input name="search">
          <input type="submit" name="submit" value="Search">
    <form>
    <input type="submit" name="submit" value="Add New Recipe">
</form>

score -2 · Accepted Answer · answered May 07 '14 at 15:14

I had the same issue, my solution (since I could not do without nested forms) is :

<form id="main">
    <input name="title" class="required">
    <form id="searchIngredient">
          <input name="search">
          <a href="#" class="submit-link"></a>
    <form>
    <input type="submit" name="submit" value="Add New Recipe">
</form>

and then I hook the class submit, and do my ajax stuff

$(document).on('click', 'form a.submit-link', function(e){
  e.preventDefault();
  var form = $(this).parents('form').first();
  var search = form.find('input[name="search"]').val();
  jQuery.post('my_ajax_url.php', {search: search)}, function(data, status, xhr) {
    // deal response
  });
});

nesting an HTML form results in invalid HTML. http://stackoverflow.com/questions/379610/can-you-nest-html-forms — Sergey, May 21 '15 at 17:44

jQuery Validation Issue with a form inside a form

3 Answers3

Linked