jQuery表单验证没有启动答案

【问题标题】：jQuery form validation not kicking injQuery表单验证没有启动
【发布时间】：2013-04-05 19:16:44
【问题描述】：

我编写了以下代码，但表单试图发布，好像找不到 javascript？

代码在文档的<head> 内：

<script language="JavaScript" type="text/javascript">
    $('.entrysend').click(function(e){
        e.preventDefault();

        var error = false;
        var name = $('#name').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var email = $('#email').val();

        if(name.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(address.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(phone.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(email.length == 0){
            var error = true;
            alert("Please complete all fields");
        }

        if(error == false){
            $.post("compthanks.asp",
                    $(".entry").serialize(),
                    function(result){
                        if($.trim(result) == 'sent'){
                            $('.entrysend').remove();
                            alert("Thanks for entering!");
                        }
                    }
</script>

HTML：

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
    <br class="floatClear" />
    <div class="formwrapper">
        <input name="name" id="name" type="text" placeholder="FullName" />
    </div>

    <div class="formwrapper">
        <textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
    </div>

    <div class="formwrapper">
        <input name="phone" id="phone" type="text" placeholder="ContactNumber" />
    </div>

    <div class="formwrapper">
        <input name="email" id="email" type="text" placeholder="Email" />
    </div>

    <div class="formwrapper floatClear">  
        <input name="submit" type="submit" value="Send Entry" class="entrysend" />
    </div>
</form>

谁能指出表单仍然提交而不是 javascript 启动的原因？

【问题讨论】：

你也可以给我们看一下 HTML 吗？
HTML 代码可以帮助我们找出您的代码在这里看起来很完美的问题
您的 HTML 页面中是否还有其他 jQuery 并且您尝试过 @matpol 建议的内容
你的JS是包含在表单元素之前还是之后？
我确实...我使用 backstretch 作为背景图像，@matpol 建议没有任何区别。史蒂夫，如所述，它在文件的开头

标签： jquery html forms validation

【解决方案1】：

如果您的 JS 在您页面的 <head> 中，那么这将不起作用。当你添加

$('.entrysend').click(function(e){...});

页面上还没有 entrysend 类的元素。

要解决这个问题，您有两个选择：

将您的 JS 移动到页面底部，在 <form> 元素之后。
将您的 JS 包装在 ready 处理程序中：

JS：

$(document).ready(function() {
    $('.entrysend').click(function(e){...});
});

这样，jQuery 将等到所有 HTML 都添加到 DOM 后，才会尝试将点击处理程序附加到 entrysend 元素。

更新：

我刚刚将您的代码添加到 jsFiddle 并注意到您发布的代码中有 JS 错误。这可能只是一个复制/粘贴错误，但它可能是您问题的原因：

你永远不会关闭一半的函数。你以两个花括号结束，它们只关闭你最后一个 function 块。您需要将)}}) 添加到您的JS

) 关闭$.post
} 关闭if(error == false)
} 用于关闭 click 处理程序中的匿名函数
) 关闭点击处理程序

新的 JS：

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('.entrysend').click(function(e){
            e.preventDefault();

            var error = false;
            var name = $('#name').val();
            var address = $('#address').val();
            var phone = $('#phone').val();
            var email = $('#email').val();

            if(name.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(address.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(phone.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(email.length == 0){
                var error = true;
                alert("Please complete all fields");
            }

            if(error == false){
                $.post("compthanks.asp", $(".entry").serialize(),function(result){
                    if($.trim(result) == 'sent'){
                        $('.entrysend').remove();
                        alert("Thanks for entering!");
                    }
                });
            }
        });
    });
</script>

【讨论】：

有趣的是，它位于页面底部，但我随后将其移至头部，看看是否有所不同....不幸的是，您的解决方案没有改变，仍然直接发布。
您尝试了我的 2 条建议中的哪一条？
好的，只是出于好奇，您的错误控制台说什么？有没有 JS 错误？
从没想过...“未捕获的 SyntaxError: Unexpected end of input”
非常感谢！有没有一种简单的方法来检查遗漏的右括号等？

【解决方案2】：

在提交时（在表单上）而不是在点击时（在按钮上）运行验证 - 如果验证失败则返回 false

【讨论】：

删除 preventdefault - 您希望表单提交并由验证决定提交是否通过。

【解决方案3】：

//你的脚本

<script language="JavaScript" type="text/javascript">
        $('.entrysend').click(function(e){

        var error = false;
        var name = $('#name').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var email = $('#email').val();

        if(name.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(address.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(phone.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(email.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                }

        if(error == false){
                    $.post("compthanks.asp", $(".entry").serialize(),function(result){
                    if($.trim(result) == 'sent'){
                       $('.entrysend').remove();
                       alert("Thanks for entering!");
                    }
                }
        </script>

//你的表格

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
        <br class="floatClear" />
        <div class="formwrapper">
          <input name="name" id="name" type="text" placeholder="FullName" />
        </div>

        <div class="formwrapper">
          <textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
        </div>

        <div class="formwrapper">
          <input name="phone" id="phone" type="text" placeholder="ContactNumber" />
        </div>

        <div class="formwrapper">
          <input name="email" id="email" type="text" placeholder="Email" />
        </div>

        <div class="formwrapper floatClear">  
          <input name="submit" type="button" value="Send Entry" class="entrysend" />
        </div>
        </form>

我已更改您的代码并在出现任何错误时提供return false; 声明，以便不会提交表单。

【讨论】：

他不需要任何return false 语句，他已经在开始使用preventDefault。所以什么都不需要返回，因为他会在没有错误的情况下提交 AJAX 表单。问题是由于未闭合的括号导致语法错误（您还没有在代码中关闭）。