2011-08-07 66 views
0

我嘗試它提交到數據庫之前驗證形式,但事情似乎與它和它只是發送反正沒有任何價值衝突的JavaScript阻止表單驗證

我的繼承人形式相沖突:

<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/> 
<span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;">Ally McCoist will be sacked on</span> 
<div id="datepicker"></div> 
<input type="hidden" name="date" id="date"> 
<input type="image" src="images/submit-button-small.png" name="submit" 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(e){     

    //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")) { 
     e.preventDefault(); 
    } else { 
     errornotice.hide(); 
    } 


}); 

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

我也有在頁面上這個JavaScript前我的jQuery UI的日期選擇器,我認爲可能會造成問題

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

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

});

手指交叉,你可以看到的東西,可能會解決這個問題

+0

似乎工作http://jsfiddle.net/pYGyJ/:S –

+0

你想要做什麼:'$(「:input」)'?爲什麼是領先的冒號?爲什麼不''(「輸入」)'? – jfriend00

+0

@ jfriend00 - [':input'選擇所有輸入,選擇,textarea和按鈕元素](http://api.jquery.com/input-selector)。 – gilly3

回答

0

這是可能的形式是填寫一個人禁用JavaScript或一個人或機器只是調用的HTTP POST,與無論他們認爲合適的價值。由於這個原因,有必要在服務器端(即在send.php)執行驗證,而不僅僅是在客戶端(在JavaScript文件中)。 JavaScript驗證實際上只是一種UI優化,可以讓用戶在不需要與服務器進行往返通信的情況下立即被告知有問題。從用戶界面的角度來看,JavaScript驗證非常重要,但從安全角度來看,它是無用的。

+0

即時通訊服務器端以及與JavaScript,我希望用戶在未填寫時提醒領域 – Gezzamondo