フォームは検証されましたが、依然として値なしで送信していますか？

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"); 
    } 
}); 
}); 

です

---

イムもjqueryのファイルへのリンク：

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

---

IVEが独自にそれをテストし、動作するようですが、何かが、このページでは、それに乗ってと検証を過ぎてスキップ以上であるように思わ

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

私はまだ動作していません...私もjquery UIのdatePickerと何か関係がありますフォーム？私は確かFIRSTNAME、姓作りたかったとメールが

を記入したとしてフォーム検証で私は、これは私のフォームページに含まれていることが含まれていないアイブ：

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

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

は、これが効果を持つことになりますフィールドに値がなくても送信しますか？

何かがdefinatley検証をオーバーライドし、それを私がJavaScriptを無効にした場合どのような

Answer 1

を提出していますか？あなたは（また）サーバー側で検証する必要があります。

リファクタリングコード！あなたはの抽出方法から始めることができます。

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をヒットした場合、フォームが送信されます。どうして？ユーザーのために既にと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）のコードと1つのグローバル... のようにvarを忘れないでください）