jQuery Validation Issue with a form inside a form

问题:

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?

回答1:

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
  });
});

回答2:

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.

回答3:

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>