Question

我正在为一个网站做一个简单的jQuery表单检查器。我在网站上有两个表单：登录表单和注册表单。我的代码如下：

$('.btn').click(function(e) {
    e.preventDefault();
    // DOES SOME ERROR CHECKING HERE
    if { hasError $('div.error').fadeIn() }

    else { $(this).parents('form').submit() }
});

所以我的问题是，登录按钮和注册按钮都有一个名为btn的类，如何让它们检查并提交自己的表单而不是检查页面上的所有表单，因为$（this）.parents （'form'）会同时获得注册和登录表单吗？

谢谢！

Answer 1

没有$（这个）将获得其各自btn你点击的那个表格。 “this”关键字传递一个元素的对象，所以不要担心这段代码会运行正常。

Answer 2

如果$(this).parents('form')返回多个元素，则html标记确实存在问题。另外，请考虑将代码缩短为

$('.btn').click(function(e) {

    // DO SOME ERROR CHECKING HERE

    if (hasError) {
        e.preventDefault();
        $('div.error').fadeIn();
    }
});

Answer 3

给他们一个id，然后就这样。

$('#btn1).click(....
$('#btn2).click(....

Answer 4

更改HTML表单结构，以便在单击任一按钮时，您可以选择相应的表单。

<form action="get">
    <input type="text" value="1" />
    <input type="button" class="btn" />
</form>

<form action="get">
    <input type="text" value="1" />
    <input type="button" class="btn" />
</form>

和jQuery：

$(function(){
    $(".btn").click(function(){
        $(this).closest("form").submit();
    });
});

修改

更好的错误处理选择器

$(this).closest('form').find('.required').each(function(){
});

http://jsfiddle.net/c9GXZ/6/

Answer 5

如果您想继续使用代码，那么您可以查看jQuery的.parent()和.parents()方法。

.parents（）和.parent（）方法类似，只是后者只在DOM树中向上移动一层。

尝试使用$(this).closest('form').submit()代替$(this).parents('form').submit()。我不是用户，但我认为您已在表单中包含表单（也可以检查或共享您的HTML。）

Answer 6

$('.btn').click(function(e) {
    e.preventDefault();
    // DOES SOME ERROR CHECKING HERE
    if (hasError) {  $('div.error').fadeIn(); } //some syntax change
    else { $(this).closest('form').submit() }  ///will get the nearest form element and stop there and will submit it as per your code...
});

<强>更新

替换此

$('.btn').click(function(e) {

用这个

$('.btn').on('click',function(e){

这让它在你的jsfiddle url中工作......

jQuery表单错误检查

6 个答案: