表單已通過驗證但仍未提交值？

Question

即時通訊使用JavaScript驗證來檢查每個表單域中的值之前，表單發送到數據庫，但是當我單擊提交表單仍發送甚至沒有任何值。 爲了測試它，我點擊每個字段以清除它們，然後試圖submittin按鈕

這裏是形式

<form method="post" action="send.php" id="theform" name="theform"> 
<input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" class="yourinfo" ><br/> 
<input type="text" name="lastname" id="lastname" value="Last Name" onFocus="this.value=''" class="yourinfo"><br/> 
<input type="text" name="email" id="email" value="Email Address" onFocus="this.value=''" class="yourinfo"><br/> 
<div id="datepicker"></div> 
<input type="hidden" name="date" id="date"> 
<input type="image" src="images/sbmit-button.png" name="submit" height="49" width="190" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" > 
</form> 

---

繼承人的JavaScript

$(document).ready(function(){ 
// Place ID's of all required fields here. 
required = ["firstname", "lastname", "email"]; 
// If using an ID other than #email or #error then replace it here 
email = $("#email"); 
errornotice = $("#error"); 
// The text to show up within a field when it is incorrect 
emptyerror = "Please fill out this field."; 
emailerror = "Please enter a valid e-mail."; 

$("#theform").submit(function(){  
    //Validate required fields 
    for (i=0;i<required.length;i++) { 
     var input = $('#'+required[i]); 
     if ((input.val() == "") || (input.val() == emptyerror)) { 
      input.addClass("needsfilled"); 
      input.val(emptyerror); 
      errornotice.fadeIn(750); 
     } else { 
      input.removeClass("needsfilled"); 
     } 
    } 
    // Validate the e-mail. 
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) { 
     email.addClass("needsfilled"); 
     email.val(emailerror); 
    } 

    //if any inputs on the page have the class 'needsfilled' the form will not submit 
    if ($(":input").hasClass("needsfilled")) { 
     return false; 
    } else { 
     errornotice.hide(); 
     return true; 
    } 
}); 

// Clears any fields in the form when the user clicks on them 
$(":input").focus(function(){  
    if ($(this).hasClass("needsfilled")) { 
     $(this).val(""); 
     $(this).removeClass("needsfilled"); 
    } 
}); 
}); 

---

IM還鏈接到一個jQuery文件：

<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> 

---

香港專業教育學院測試了它自己的，它似乎工作，但事情似乎是在騎它，並跳過過去驗證這個頁面

================================================ ==================================

我仍然沒有工作... basicallly你認爲它可能與我也在使用的jQuery UI日期選擇器有關與形式??香港專業教育學院不包括在表單驗證，我只是想確認名字，姓氏和電子郵件充滿了

我有這個列入我的表單頁面：

<script> 
     $(function() { 
$("#datepicker").datepicker({ 
    altField: '#date' 
}); 

$('#submit').click(function() { 
    $('#output').html($('form').serialize()); 
}); 
}); 
</script> 

這會不會有效果它提交即使在領域沒有價值？

東西是definatley重寫驗證並提交它

Answer 1

如果我禁用JavaScript？您應該（也）在服務器端進行驗證。

另外重構您的代碼！你可以從開始提取方法。

Answer 2

您需要取消提交活動。它看起來像你試圖做到這一點，返回false或返回true。但是，使用jQuery你需要做一些稍微不同的方法。

首先，您需要擁有JavaScript事件的參數名稱。我通常使用e。

$("#theform").submit(function(e){ 

然後，您需要按照以下步驟更新下面的代碼：

//if any inputs on the page have the class 'needsfilled' the form will not submit 
if ($(":input").hasClass("needsfilled")) { 
    e.preventDefault(); 
} else { 
    errornotice.hide(); 
} 

的e.preventDefault（）被處理停止活動。在這種情況下，這意味着表單不會被提交。

Answer 3

It's working for me!（但它可能不工作，你怎麼把它想象應該）

一旦你輸入一個有效的電子郵件的形式發送，如果你擊中submit。爲什麼？因爲您已經爲用戶填寫了firstname和lastname - 字符串爲First Name和Last Name！

所以，你不應該僅僅檢查填寫姓氏和名字空或錯誤字符串，但如果第一個名字是First Name或姓Last Name你也應該引發錯誤。

// Check for empty value, the error string 
//  OR the default values of "First Name" and "Last Name" 

if ((input.val() == "") || 
    (input.val() == emptyerror) || 
    (input.val() == "First Name") || 
    (input.val() == "Last Name")) { 

    input.addClass("needsfilled"); 

Working example

（我假設你使用服務器端驗證作爲最後的檢查，因爲人們喜歡我就是喜歡NoScript）

（另外你在頂部宣佈5個全局變量您代碼和一個更環球在你的for循環（i）...不要忘記var ..就像你用於input）