表单内的表单的jQuery验证问题 [英] 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>

现在，我正尝试使用class ="required"验证#main表单中的输入内容，但是使用表单中的第二个#serachIngredient表单，验证完全无效.

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.

万一您想知道:#searchIngredient表单使用ajax返回结果，并且由于设计原因，该表单必须位于#main表单之内.

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.

我知道jQuery验证可以在没有#searchIngredient表单的情况下工作，但是一旦我将其重新添加，它就会停止工作，并且没有错误.

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?

推荐答案

我遇到了同样的问题，我的解决方案是(因为没有嵌套表单就无法完成):

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>

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

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

这篇关于表单内的表单的jQuery验证问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！