表单内的表单的jQuery验证问题

Question

这是一个奇怪的问题。我的设置是这样的..

<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>

现在我尝试使用 class="required" 仅验证#main 表单中的输入，但是使用表单中的第二个#serachIngredient 表单，验证根本不起作用。

Incase You Are Wondering：#searchIngredient 表单使用 ajax 来返回结果，并且由于设计原因，它需要在 #main 表单内。

我知道 jQuery 验证在没有 #searchIngredient 表单的情况下工作，但是一旦我将其添加回来，它就会停止工作，没有错误。

任何建议的解决方法或提示？

Answer 1

这是不可能的。 HTML 不支持嵌套表单。

内部表单的开始标记将被忽略，内部表单的结束标记将改为结束外部表单，将提交按钮留在表单之外。

您可以在页面中拥有任意数量的表单，但不能相互嵌套。

Answer 2

我有同样的问题，因为在 html 中不支持嵌套表单 嵌套表单将被忽略，但看起来只有第一个嵌套表单会被忽略 因此，对于 jquery 表单验证，我尝试在主表单之后添加嵌套，然后添加要验证的表单，它工作正常。

<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>

Answer 3

我有同样的问题，我的解决方案（因为我不能没有嵌套表单）是：

<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>

然后我挂钩类提交，并做我的 ajax 的东西

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