フォームの検証 - IfとElse Ifの使い方

Question

JavaScriptのフォーム検証をしようとしていて、いくつかのケースでformValueを0に設定したいとします。これは必須フィールドのいずれかが記入されていない場合、値は0

function formValidation() { 
      var formValue = 1; 

      if (document.getElementById('orgname').value == '') formValue = 0; 
      else if (document.getElementById('culture[]').value == '') formValue = 0; 
      else if (document.getElementById('category[]').value == '') formValue = 0; 
      else if (document.getElementById('service[]').value == '') formValue = 0; 

      if (formOkay == 1) { 
      return true; 
     } else if (formOkay == 0) { 
      alert('Please fill out all required fields'); 
      return false; 
     } 
} 

に行くべき、これを行うために、よりエレガントな方法はありますか？

EDIT：スクリプトが動作していないようです。

あなたは、いくつかのループを行うことができます

Answer 1

：

var toCheck = ['orgname', 'culture[]', 'category[]', 'category[]'] 
for(var id in toCheck) 
{ 
    if(document.getElementById(id).value == ''){ 
     formValue = 0; 
     break; 
    } 
} 

よりエレガントな方法は、あなたがチェックしたい各入力で「必要な」クラスを指定して行うよりも、次のjQueryを使用していることになります

このような

$(document).ready(function(){ 
    var toCheck = $('.required'); 
    var formValue = 1; 
    $.each(toCheck, function(index, element){ 
     if(element.val() == '') 
      formValue = 0; 
    }); 
}); 

Answer 2

何かが（これはvalue属性が参照される要素に利用可能であることを前提として）を支援する必要があります

var ids = ["orgname", "culture[]", "category[]", "service[]"], 
    formValue = 1; // default to validation passing 

for (var i = 0, len = ids.length; i < len; i++) { 
    if (document.getElementById(ids[i]).value === "") { 
     formValue = 0; 
     break; // At least one value is not specified so we don't need to continue loop 
    } 
} 

Answer 3

これは、&演算子を利用してブール論理を使用して他の言語で行っています。値がfalseの場合、常にfalseが返されます。以下のような

何か：

function formValidation() { 
    var formValue = true; 

    formValue &= document.getElementById('orgname').value != ''; 
    formValue &= document.getElementById('culture[]').value != ''; 
    formValue &= document.getElementById('category[]').value != ''; 
    formValue &= document.getElementById('service[]').value != ''; 

    if(!formValue) { 
    alert('Please fill out all required fields'); 
    } 

    return formValue; 
} 

これはあなたのロジックが複雑である他のシナリオのために働くという利点を有しています。最後にtrue/falseと評価されるものはすべて、この解決策に適合します。それから私は、ロジックの重複削減に取り組むだろう

：

$(function() { 
    $('form').submit(function() { 
    var toValidate = $(this).find('input[data-validation]'); 
    for(var i=0; i<toValidate.length; i++) { 
     var field = $(toValidate[i]); 
     if(field.val().search(new RegExp(field.data('validation'))) < 0) { 
     alert("Please fill out all required fields!"); 
     return false; 
     } 
    } 
    }); 
}); 

：jQueryのを使用してBaszzの二答え@時

function formValidation() { 
    var formValue = true; 

    var elementIdsToCheck = ['orgname', 'culture[]', 'category[]', 'category[]']; 
    for(var elementId in elementIdsToCheck) { 
    formValue &= document.getElementById(elementId).value != ''; 
    } 

    if(!formValue) { 
    alert('Please fill out all required fields'); 
    } 

    return formValue; 
} 

Answer 4

ビルを、あなたはまた、HTML5 data-属性を使用して、より汎用的なソリューションを構築できますマークアップで正規表現を指定できます。

<form> 
    <input type="text" data-validation=".+" /> 
</form> 

必須フィールドの場合、正規表現として "。+"を使用できます。これは、ユーザーが少なくとも1文字を入力する必要があることを意味しますが、正式な正規表現を使用して有効な電子メールアドレス、電話番号、コードなど...