jQuery客户端表单验证不持久答案

【问题标题】：jQuery Client Side Form Validation not persistingjQuery客户端表单验证不持久
【发布时间】：2013-06-02 19:42:57
【问题描述】：

我没有成功搜索解决此问题的方法，我的表单似乎正确提交和验证。发现错误时，应突出显示这些字段并显示一条消息，这有效，但它不会保持突出显示。

所需的行为是保持消息和突出显示，直到再次提交表单。现在它“闪烁”了足够长的时间，所以我知道代码正在运行。它更容易看到然后阅读。为了帮助隔离问题，我制作了一个测试页：http://img.shikadi.com/testpage.html

（我意识到表单还没有在任何地方提交。它将提交到一个简单的 php 脚本，该脚本将重新验证并向我发送电子邮件。我希望在我解决这个问题之前让这个客户端验证工作）

【问题讨论】：

欢迎您。您提供给我们的细节如此之少，真的很难为您提供帮助。请编辑您自己的帖子并添加相关信息，例如代码。我还建议您查看我们的常见问题解答：stackoverflow.com/faq祝您好运。
谢谢，我确实在测试页面上包含了完整的代码。我想我可以将它包含在我的问题中，但它似乎太长了。
我检查了代码，我想你应该把它粘贴到那里（不是整个 HTML，只是逻辑）。下次你就知道了。 :)

标签： jquery forms validation

【解决方案1】：

添加.preventDefault() 方法并重试
它通过防止按钮的默认设置来帮助

删除“onclick”属性并改用jQuery。

$("#right").click(function (e) {

e.preventDefault();
var form = $("#contact-form");

var postData = {};
postData.name = form.find('input.name').val();
postData.email = form.find('input.email').val();
postData.message = form.find('textarea.message').val();

var errors = new Array();
if (postData.name == null || postData.name == '' || postData.name == 'name') {
    errors.push('Name is required.');
    $("input.name").addClass("error");
}
if (postData.email == null || postData.email == '' || postData.email == 'email') {
    $("input.email").addClass("error");
    errors.push('Please enter a valid email.');
} else if (!validateEmail(postData.email)) {
    $("input.email").addClass("error");
    errors.push('Please enter a valid email.');
}
if (postData.message == null || postData.message == '' || postData.message == 'message') {
    $("textarea.message").addClass("error");
    errors.push('Message is required.');
}

if (errors.length > 0) {
    $("#errors").show();

} } }

【讨论】：

【解决方案2】：

  <!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="UTF-8">
<style type="text/css">
#contact form {
width: 98%;
max-width: 600px;
height: auto;
}

#contact input, button, textarea {
font: 16px Verdana, sans-serif;
position: relative;
margin: 0.25rem 0;
padding: 2px 4px;
width: 48%;
width: calc(50% - 14px);
}

#contact .left {
float: left;
}

#contact .right {
float: right;
}

#contact textarea {
resize: none;
overflow: auto;
height: 165px;
width: 99%;
width: calc(100% - 10px);
}

.hidden {
display: none;
}

.error {
background-color: rgb(255, 255, 170);
opacity:0.8;
}
</style>
<title>Test Page</title>
</head>
<body>
        <section id="contact">
            <h1>Contact Me</h1>
            <div id="errors" class="hidden"><small>* Your message was not sent.<br>Please revise the highlighted fields.</small></div>
            <form name="contactme" id="contact-form" method="post" action="form.php" onSubmit=" return submitContactForm();">
            <input class="name left" type="text" name="name" maxlength="50" class="line" value="name" onfocus="if (this.value=='name') this.value='';" onblur="if (this.value=='') this.value='name';"/>
            <input class="email right" type="text" name="email" maxlength="50" class="line" value="email" onfocus="if (this.value=='email') this.value='';" onblur="if (this.value=='') this.value='email';"/>
            <textarea name="comments" maxlength="1000" class="message" onfocus="if (this.value=='message') this.value='';" onblur="if (this.value=='') this.value='message';"/>message</textarea>
            <button class="right" type="submit" value="Submit" >Submit</button>
            </form>
        </section>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
validateEmail = function(email){
   var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
   return pattern.test(email);
}

submitContactForm = function () {
    var form = $("#contact-form");

    var postData = {};
    postData.name = form.find('input.name').val();
    postData.email = form.find('input.email').val();
    postData.message = form.find('textarea.message').val();

    var errors = new Array();
    if (postData.name == null || postData.name == '' || postData.name == 'name') {
        errors.push('Name is required.');
        $("input.name").addClass("error");
    }
    if (postData.email == null || postData.email == '' || postData.email == 'email') {
        $("input.email").addClass("error");
        errors.push('Please enter a valid email.');
    } else if (!validateEmail(postData.email)) {
        $("input.email").addClass("error");
        errors.push('Please enter a valid email.');
    }
    if (postData.message == null || postData.message == '' || postData.message == 'message') {
        $("textarea.message").addClass("error");
        errors.push('Message is required.');
    }

    if (errors.length > 0) {

        $("#errors").show();
        return false;
   }
}
</script>
</body>
</html>

【讨论】：

这似乎可行，谢谢！看起来您刚刚添加了return false;，对吗？你能解释一下为什么会这样吗？
是的，函数返回false，以防验证错误，不会提交表单。 fuelyourcoding.com/jquery-events-stop-misusing-return-false
没有解释？您评论中的链接很酷，但您应该在此处包含解释，因此如果链接在几年后断开，信息仍然会在这里，您的答案将仍然有价值。 ;)
@ForceMagic，我的回答很有价值，我不知道为什么人们投票认为“没用”？！斯基哈迪寻求帮助，认识到我在代码中所做的事情，如果他需要进一步的解释，他可以做一些研究......实际上，我不知道解释，（我不太在乎，只要由于代码有效）我只知道当函数返回 false -> 表单将不会被提交。
请参阅如何为问题写出好的答案？它可能会给你一些线索。 meta.stackexchange.com/a/7659/181303 另外，当有一些解释时，人们会考虑一个好的答案，而不仅仅是工作代码。