jQuery 表单验证被绕过答案

【问题标题】：jQuery Form Validation being bypassedjQuery 表单验证被绕过
【发布时间】：2013-11-10 07:07:29
【问题描述】：

谁能告诉我我的 jQuery 验证有什么问题？它没有验证我的表单，而是忽略了导致不检查输入的代码。

表格：

<form class="form" accept-charset="UTF-8" action="URL-to-complete-form" method="POST" onsubmit="return validateForm();">
<input class="form-name" type="text" placeholder="Name"></div>
<input class="form-email" type="text"placeholder="Email"></div>
<input style="background-color: #fc8f12;" type="submit" value="Subscribe">
</div>
</form>

Javascript：

function validateForm()
{
    // Validate Name
    var title = $(".form-name").val();
    if (title=="" ||title=="Name" || title==null) { } else {
        alert("Please enter a name!");
    }

    // Validate Email
    var email = $(".form-email").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email=="Email" || email==null) { } else {
        alert("Please enter a valid email");
    }
  return false;
}

感谢大家的时间和帮助。

【问题讨论】：

您检查浏览器控制台是否有任何错误？
您的 javascript 中肯定存在错误，导致表单提交.. 检查您的控制台并解决错误..
你的函数总是返回 false

标签： javascript jquery validation

【解决方案1】：

在我看来，您似乎没有做任何事情来阻止提交表单，因为您在表单中有“action=”行...您告诉它，在提交时，都运行javascript函数并提交表单。您应该让 javascript 在验证后提交表单。有很多方法可以做到这一点...可能最简单的方法是将提交按钮设置为类型按钮而不是类型提交，然后将验证和提交绑定到单击该按钮。

【讨论】：

【解决方案2】：

由于您正在“干预”提交回发以进行验证，请将您的代码转换为清晰，从表单中删除提交按钮，根据按钮单击进行验证并使用有效数据执行您自己的表单自定义回发：

 <form class="form" accept-charset="UTF-8" method="POST" action="#">
        <input class="form-name" type="text" placeholder="Name"></div>
        <input class="form-email" type="text" placeholder="Email"></div>
        </div>
    </form>
    <button>Subscribe</button>

 $(function () {
            $('button').on('click', function (event) {
                validateForm();
            });

        });

        function validateForm() {
            // Validate Name
            var title = $(".form-name").val();
            if (!title) {
                alert("Please enter a name!");
                return false;
            }

            // Validate Email
            var email = $(".form-email").val();
            if (!email) {
                alert("Please an email address");
                return false;
            }

            if (!/(.+)@(.+){2,}\.(.+){2,}/.test(email)) {
                alert("Please enter a valid email");
                return false;
            }

            $.post('URL-to-complete-form', $("form").serialize(), function (data) {
                console.log('server call complete');
                console.log(data);
            });

        }

这里也是一个工作的 jsFiddle：http://jsfiddle.net/t8vQ2/

【讨论】：

【解决方案3】：

HTML：

<form id="form1" ...

jQuery:

$("#form1").on("submit", function(){
  if($("input[name=firstName]").val() == ""){
    // errors here
    return false;
  }
});

【讨论】：