-2

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

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

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

4

2 回答 2

0

添加方法并 通过阻止按钮的默认设置.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();

} } }

于 2013-06-02T19:47:46.243 回答
-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>
于 2013-06-02T19:55:54.883 回答