Javascriptを競合フォーム検証を防止

Question

イムは、そのちょうど任意の値

せずに、とにかく送信HERESに私のフォームと競合しているようだ：

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

---

HERESに私の検証の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"); 
    } 
}); 
}); 

---

私は）問題

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

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

}を引き起こしているかもしれないと思う私のjqueryのUIの日付ピッカーフォアページにこのJavaScriptをも持っています。

指はあなたのいずれかがこの問題を解決するかもしれない何かを見ることができ交差

Answer 1

フォームがで、JavaScriptが無効になってか、人や機械が単にHTTPのPOSTを呼び出したことを人が記入された可能性があります彼らが見たどんな価値があっても。このため、クライアント側（JavaScriptファイル内）だけでなく、サーバー側（つまりsend.php）で検証を行う必要があります。 JavaScriptの検証は実際にはUIの最適化であり、サーバーへのラウンドトリップ通信を必要とせずに何かが間違っていることをすぐにユーザーに伝えることができます。ユーザーインターフェイスの観点からは、JavaScriptの検証は重要ですが、セキュリティの観点からは無用です。