jQuery客戶端表單驗證不會持續

-2

我已經搜索沒有成功的解決方案，我的表單似乎提交和驗證正確。當發現錯誤時，這些字段應該高亮顯示，並顯示一條消息，並且這可以正常工作，但不會保持突出顯示。jQuery客戶端表單驗證不會持續

期望的行爲是保留消息並保留突出顯示，直到再次提交表單。現在它「閃爍」的時間足夠長，所以我知道代碼正在運行。這是更容易看到然後閱讀。我做了一個測試頁面，以幫助找出問題：http://img.shikadi.com/testpage.html

（我意識到表單尚未提交到任何地方，它會提交給一個簡單的php腳本，它將重新驗證併發送一封電子郵件給我。倒是希望得到這個客戶端驗證工作之前，我處理那些）

來源

2013-06-02 shikadi

歡迎SO。真的很難用你給我們的細節來幫助你。請編輯您自己的帖子並添加相關信息，例如代碼。我還建議你看看我們的FAQ：http://stackoverflow.com/faq祝你好運。 – ForceMagic

謝謝，我確實在測試頁上包含了完整的代碼。我想我可以把它包括在我的問題中，但似乎太長了。 – shikadi

我已經檢查了代碼，我認爲你應該粘貼它（不是整個HTML，只是邏輯）。你會知道下一次。 :) – ForceMagic

-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._-][email protected][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-02 19:55:54 sinisake

這似乎工作，謝謝！看起來你剛剛添加了'return false;'是嗎？你能解釋爲什麼這個工作嗎？ – shikadi

是的，函數返回false，如果有驗證錯誤，表單將不會被提交。 http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ – sinisake

沒有解釋？你評論中的鏈接很酷，但你應該在這裏提供解釋，所以如果鏈接在幾年內中斷，信息仍然會在這裏，你的答案仍然是有價值的。 ;） – ForceMagic

添加.preventDefault()方法，然後再試一次
它通過阻止甚至按鈕的默認幫助

刪除‘點擊’屬性和使用改爲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-02 19:47:46

jQuery客戶端表單驗證不會持續

回答

相關問題