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表单，验证根本不起作用。

你想知道：＃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
  });
});

jQuery Validation问题与表单内的表单

3 个答案: