Question

我搜索没有成功解决此问题，我的表单似乎正确提交和验证。找到错误时，应突出显示字段并显示一条消息，这样可以正常工作，但不会突出显示。

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

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

Answer 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();

} } }

Answer 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>

jQuery客户端表单验证不会持久化

2 个答案: