Question

我一直在撞墙，试图弄清楚我在这里做错了什么（表格提交/不验证）。我不是专家，所以我希望比我聪明的人能够快速发现我做错的事情：

<script>
    function validateForm(){

        var first = $('#first_name').val();
        if(first==null || first==''){
            if ($('span:contains("Enter a valid first name")').length==0){
                $(this).closest('div').addClass('has-error');
                $(this).after('<span class="error" style="color:red;font-size:14px;">Enter a valid first name</span>');
            }
            return false;
        }

        var last = $('#last_name').val();
        if(last==null || last==''){

            if ($('span:contains("Enter a valid last name")').length==0){
                $(this).closest('div').addClass('has-error');
                $(this).after('<span class="error" style="color:red;font-size:14px;">Enter a valid last name</span>');
            }
            return false;
        }

        return false;
    }

    </script>

html：

<form id="myid" method="POST" onsubmit="return validateForm()">

....a form...

</form>

我使用类似的语法来验证.focusout()上的表单输入，并且它运行正常。

Answer 1

最后一次

return false;

应该是

return true;

当没有任何验证错误时，您就到达那里。返回false告诉浏览器不提交表单，您需要返回其他内容。您也可以完全删除该行，因为false以外的任何内容都允许表单提交。

Answer 2

假设您希望表单在没有错误的情况下正常运行，那么您应该让函数返回true：

 function validateForm(){

    var first = $('#first_name').val();
    if(first==null || first==''){
        if ($('span:contains("Enter a valid first name")').length==0){
            $(this).closest('div').addClass('has-error');
            $(this).after('<span class="error" style="color:red;font-size:14px;">Enter a valid first name</span>');
        }
        return false;
    }

    var last = $('#last_name').val();
    if(last==null || last==''){

        if ($('span:contains("Enter a valid last name")').length==0){
            $(this).closest('div').addClass('has-error');
            $(this).after('<span class="error" style="color:red;font-size:14px;">Enter a valid last name</span>');
        }
        return false;
    }

    return true; // everything went okay !
}

表格未经验证

2 个答案: