2012-03-02 5 views
0

フォームを正しく検証する方法を尋ねています。Js intとselectboxを使用した検証

私はselectBox(persorecepteurという名前)を持っています。選択されたアイテムが0の場合、JSは4つのフィールドをチェックします(すべてが整数で、桁数を確認します)(その名前は確立、銀行、勘定、キーです)。フォームの終わりに

が、私はあまりにも検証されなければならない2つのフィールド(ダブル、テキスト)

を持っているので、これは私が作ったものである。

<script type="text/javascript"> 
function valider(){ 
    var ck_name = /^[A-Za-z0-9 ]{3,20}$/; 
     var ck_double = /^\d{3}\.\d{2}$/; 


     var value = "0"; 
     if (myForm.persorecepteur.options[myForm.persorecepteur.selectedIndex].value == value){ 

      // mist be 14701 
      value = "14701"; 
      if (document.myForm.stablishment.value != value) { 
       document.myForm.establishment.style.backgroundColor="red"; 
     alert("Must be 14701"); 
       return false; 
      } 
      value = "00000"; 
      if (document.myForm.bank.value != value) { 
       document.myForm.bank.style.backgroundColor="red"; 
     alert("Must be 00000"); 
       return false; 
      } 

      if (document.myForm.account.value.length() != 11) { 
       document.myForm.account.style.backgroundColor="red"; 
     alert("You must enter 11 digits"); 
       return false; 
      } 

      if (document.myForm.key.value.length() != 2) { 
       document.myForm.key.style.backgroundColor="red"; 
     alert("You must enter 2 digits"); 
       return false; 
      } 

     } 


     if (!ck_double.test(document.myForm.amount.value)) { 
     document.myForm.amount.style.backgroundColor="red"; 
       alert("You must enter the sum like that : abc.de "); 
       return false; 
      } 
    if (!ck_name.test(document.myForm.description.value)) { 
     document.myForm.description.style.backgroundColor="red"; 
     return false; 
      } 

     return true; 
} 
</script> 

しかし、最初に、私ドン」 "価値"を作らなければならないのですか? .value.length()で作成したのと同じ長さを確認できますか?

おかげで私は、あなたの質問But first I don't have to make "value" isn't it?で変数の値を宣言する必要がある場合は、あなたが求めていると仮定し

EDIT

<form name="myForm" action="performtransfert" method="POST" onsubmit="return valider();"> 

     <table width="100%" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td>Selectionnez un compte en banque a debiter : </td> 
      <td> 
       <SELECT name="debiteur" size="1"> 

        <option value="4">compte facturier (Current acount) - 100.0</option> 

        <option value="7">livret vert (Spare acount) - 1379.98</option> 

       </SELECT> 
      </td> 
     </table> 
     <br /><br /> 

     <table width="100%" border="1" cellspacing="0" cellpadding="0"> 
    <tr> 
      <td><SELECT name="persorecepteur" size="1"> 
        <option value="0">Selectionnez l'un de vos comptes si c'est le destinataire 

        <OPTION value="4">compte facturier (Current acount) - 100.0</OPTION> 

        <OPTION value="7">livret vert (Spare acount) - 1379.98</OPTION> 

       </SELECT> 
       <br /><br /> 
       Sinon, veuillez remplir le BBAN : <INPUT type=text name="establishment" size="5"> <INPUT type=text name="bank" size="5"> <INPUT type=text name="account" size="13"><INPUT type=text name="key" size="1"> 
      </td> 
     </tr> 
     </table> 



     <br /><br /> 

     <table width="100%" border="1" cellspacing="0" cellpadding="0"> 
      <tr> 
       <td>Somme à verser : </td> 
       <td><INPUT type=text name="amount" size="6"></td> 
       <td>Desctiption : </td> 
       <td><INPUT type=text name="description" size="45"></td> 
      </tr> 
     </table> 

     <br /><br /> 
     <input type="submit" value="Valider le payement" /> 

    </form> 
+0

htmlコードも投稿してください。 – neo108

+0

@ neo108:こんにちは、お返事ありがとうございます。最初の投稿を更新しました;-)お返事ありがとうございます – clement

+0

あなたの質問は、 "しかし、最初に私は"値 "を作る必要はありませんか?推測するには十分ではない。しかし、私の最高の推測は42です。 – sweaver2112

答えて

0

...私はJSで初心者だ、私を助けるために?いいえ、あなたは、あなたがこのように、実際の値そのものを比較することができるはず必要はありません - document.myForm.bank.value == "0"

そして、はい、あなたはdocument.myForm.account.value.lengthなくdocument.myForm.account.value.length()

と長さを確認することができます私はあなたが始める推薦しますjQueryの検証を使用して(学習)。それは物事がはるかに簡単かつすっきりなります...

次のような単純なjQueryの検証は、フォームのために働くだろう...

$(document).ready(function(){ 

    $("#myForm").validate({ 
     rules: { 
      amount: { 
       required: true, 
       number: true 
      }, 
      description: { 
       required: true 
      }, 
      establishment: { 
       required: function(element) { 
        return $("#persorecepteur").val() == '0' 
       }, 
       number: true 
      }, 
      bank: { 
       required: function(element) { 
        return $("#persorecepteur").val() == '0' 
       }, 
       number: true 
      }, 
      account: { 
       required: function(element) { 
        return $("#persorecepteur").val() == '0' 
       }, 
       number: true 
      }, 
      key: { 
       required: function(element) { 
        return $("#persorecepteur").val() == '0' 
       }, 
       number: true 
      } 

     }, 
     messages: { 
      amount: { 
       required: "Needs entry", 
       number: "only numbers allowed" 
      }, 
      description: "Needs entry", 
      establishment: { 
       required: "Have to enter", 
       number: "only numbers allowed" 
      }, 
      bank: { 
       required: "Have to enter", 
       number: "only numbers allowed" 
      }, 
      account: { 
       required: "Have to enter", 
       number: "only numbers allowed" 
      }, 
      key: { 
       required: "Have to enter", 
       number: "only numbers allowed" 
      }, 
     } 
    }); 


    $('#myForm').submit(function() { 
     if($("#persorecepteur").val() == '0') { 
      if($("#establishment").val() !="" && $("#establishment").val() != "14701") { 
       alert("Establishment must be 14701"); 
       return false; 
      } else if($("#bank").val() != "" && $("#bank").val() != "00000") { 
       alert("Must be 00000"); 
       return false; 
      } else if($("#account").val() != "" && $("#account").val().length != 11) { 
       alert("You must enter 11 digits"); 
       return false; 
      } else if($("#key").val() != "" && $("#key").val().length != 2) { 
       alert("You must enter 2 digits"); 
       return false; 
      } 
     } 
    }); 
}); 

あなたはに上記のコードのためのフォームフィールドのidを宣言する必要があります作業。

関連する問題