データフォーマット、データを検証＆機能によってフォームフィールドを集中する方法

Question

このfunctionになって助けが必要です：

検証データ形式

検証データが不足している上

フォーカスを既存ていますフィールド（一度に1つずつは問題ありません）

以下の機能は、いくつかのアドバイスからed。それは私のオリジナルよりはるかに良く機能します。しかし、電子メールfieldが空白の場合は値が入力されるまで移動しませんが、他のフィールドは正しくフォーカスされますが、funcはelseに移動することができ、不透明度が下がります。

function quantity_box() { 

    // store all your field names in an array 
    var fieldNames = ["EMAIL", "BILLTOFIRSTNAME", "BILLTOLASTNAME"]; 

    // loop over each field name in that array 
    for (var i = 0; i < fieldNames.length; i++) { 

    // extract the field name 
    var fieldName = fieldNames[i]; 

    // use the field name to index the form object and get the field itself 
    var field = document.forms["billing_form_id"][fieldName]; 

    // check the field's value to see if it's empty 
    if (field.value === '') { 
     field.focus(); 

    // break from our loop, since we've already found an invalid value 
    break; 

    }else{ 

     $(".prod_billing_box").delay(0).animate({"opacity": "0"}, 200); 
     $(".prod_quantity_box").delay(215).animate({"opacity": "1"}, 200); 

    } 
} 

注意してください。 EMAILのようなフィールドは、正しいフォーマットを確認するためにTextMode = "Email"のような設定を持っていますが、上記の関数も無視します。

Answer 1

インデックスの仕組みが誤解されています。次の行は有効ですが、期待通りの行はありません。

["EMAIL" && "BILLTOFIRSTNAME" && "BILLTOLASTNAME"] 

あなたが希望のように、これは実際にはif文では、and操作を使用してブール式を行っている行っています。実際にjavascriptコンソールでその行を実行すると、それは印刷されます

"BILLTOLASTNAME" 

これは有効ですが、あなたが望むものではありません。

代わりに、すべてのフォームフィールドをループし、それぞれが有効であることを確認する必要があります。いずれかのフィールドが無効な場合は、breakをループから外すことができます。

// track if the entire form is valid, start true 
var allValid = true; 

// store all your field names in an array 
var fieldNames = ["EMAIL", "BILLTOFIRSTNAME", "BILLTOLASTNAME"]; 

// loop over each field name in that array 
for (var i = 0; i < fieldNames.length; i++) { 
    // extract the field name 
    var fieldName = fieldNames[i]; 
    // use the field name to index the form object and get the field itself 
    var field = document.forms["billing_form_id"][fieldName]; 
    // check the field's value to see if it's empty 
    if (field.value === '') { 
    field.focus(); 
    // our entire form isn't valid 
    allValid = false; 
    // break from our loop, since we've already found an invalid value 
    break; 
    } 
} 

// if we make it this far and allValid is still true... 
if (allValid) { 
    // perform your "else" code here 
} 

Answer 2

HTML5フォームフィールドバリデーターを使用してJavaScriptを使用しないでこれを行うことができます。 <form>タグでフォームフィールドを書いている限り、requiredなどのバリデータをフィールドに追加することができ、バリデータがすべて通過するまでフォームは送信されず、検証警告が表示されます。以下は実際の例です。

<form> 
 
    <input type="text" required placeholder="Must fill me in"><br/> 
 
    <input type="checkbox" required> Must be checked<br/> 
 

 
    <input type="radio" name="radiogroup" required> One must be chosen<br/> 
 
    <input type="radio" name="radiogroup"> One must be chosen 2<br/> 
 

 
    <input type="email" placeholder="Must be an email if filled"><br/> 
 

 
    <br/> 
 
    <button type="submit">Submit</button> 
 
</form>

それはフォーム要素そのものを照会することも可能ですし、

それはスタイルの有効と無効なフィールドに有効なだけでなく、使用 :valid CSSフォームセレクタをだことかのように。