Question

我编写了以下代码但是表单试图发布，好像没有找到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踢？

Answer 1

运行验证onsubmit（在表单上）而不是onclick（在按钮上） - 如果验证失败则返回false

Answer 2

如果您的JS位于您网页的<head>，那么这将无效。当你添加

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

页面上没有entrysend类的元素。

要解决此问题，您有两种选择：

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

JS：

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

这样，在尝试将点击处理程序附加到entrysend元素之前，jQuery将等待所有HTML添加到DOM中。

更新：

我刚刚将您的代码添加到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>

Answer 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;语句，以便不会提交表单。

jQuery表单验证没有踢

3 个答案: