シンプルなライブjqueryフォームバリデーターのコード構造

Question

私はJavaScriptとjqueryを学んでいて、特殊なスタイリングがあれば、私のフォームのいくつかの入力が満たされているかどうかを確認するために次のコードを書いています。

コードは正常に動作しますが、これを書き込むにはどうすればよいでしょうか？

$(document).ready(function() { 
 
    $("#id_email").change(function() { 
 
     var emailField = document.getElementById("id_email").value; 
 
     
 
     if (emailField.indexOf("@") >= 0 && emailField.indexOf(".") >= 0) { 
 
      $(this).attr(/* styling my field */); 
 
     } else { 
 
      $(this).attr(/* styling my field */); 
 
     } 
 
    }); 
 
    
 
    $("#id_last_name").change(function() { 
 
     var nameField = document.getElementById("id_last_name").value; 
 
     
 
     if (nameField.length > 0) { 
 
      $(this).attr(/* styling if true */); 
 
     } else { 
 
      $(this).attr(/* styling if false */); 
 
     } 
 
    }); 
 
    
 
    $("#id_phone").change(function() { 
 
     var phoneField = document.getElementById("id_phone").value; 
 
     
 
     if (phoneField.length > 0) { 
 
      $(this).attr(/* styling if true */); 
 
     } else { 
 
      $(this).attr(/* styling if false */); 
 
     } 
 
    }); 
 
    
 
    $("#id_company").change(function() { 
 
     var companyField = document.getElementById("id_company").value; 
 
     
 
     if (companyField.length > 0) { 
 
      $(this).attr(/* styling if true */); 
 
     } else { 
 
      $(this).attr(/* styling if false */); 
 
     } 
 
    }); 
 
    
 
    $("#id_activity").change(function() { 
 
     var activityField = document.getElementById("id_activity").value; 
 
     
 
     if (activityField !== "---------") { 
 
      $(this).attr(/* styling if true */); 
 
     } else { 
 
      $(this).attr(/* styling if false */); 
 
     } 
 
    }); 
 
});

Answer 1

あなたはif文速記を使用して、代わりにdocument.getElementById("").value;の$(this).val()を使用することができます。

$(document).ready(function() { 
    $("#id_email").change(function() { 
    var emailField = $(this).val(); 
    (emailField.indexOf("@") >= 0 && emailField.indexOf(".") >= 0) ? $(this).attr(/* styling my field */) : $(this).attr(/* styling my field */); 
    }); 

    $("#id_last_name").change(function() { 
    var nameField = $(this).val(); 
    (nameField.length > 0) ? $(this).attr(/* styling if true */) : $(this).attr(/* styling if false */); 
    }); 

    $("#id_phone").change(function() { 
    var phoneField = $(this).val(); 
    (phoneField.length > 0) ? $(this).attr(/* styling if true */) : $(this).attr(/* styling if false */); 
    }); 

    $("#id_company").change(function() { 
    var companyField = $(this).val(); 
    (companyField.length > 0) ? $(this).attr(/* styling if true */) : $(this).attr(/* styling if false */); 
    }); 

    $("#id_activity").change(function() { 
    var activityField = $(this).val(); 
    (activityField !== "---------") ? $(this).attr(/* styling if true */) : $(this).attr(/* styling if false */); 
    }); 
}); 

Answer 2

あなたが入力のために同じスタイルを持っている場合、メソッドを作成することができます。

function stylingMyInput(element, type) { 
    if (type === true) { 
     element.attr(/* styling if true */); 
    } else { 
     element.attr(/* styling if false */); 
    } 

    } 


    $("#id_email").change(function() { 
    var emailField = document.getElementById("id_email").value; 
    stylingMyInput(emailField, emailField.indexOf("@") >= 0 && emailField.indexOf(".") >= 0) 
    }); 

    $("#id_last_name").change(function() { 
    var nameField = document.getElementById("id_last_name").value; 

    stylingMyInput(nameField,nameField.length > 0) 
    }); 

Answer 3

あなたは、共通のクラス（例えば、input_field）をチェックしたいすべての入力要素を与え、その後、一度にこれらの要素にchangeイベントを添付することができます。その後、イベントハンドラでは、あなたの要素をチェックし、必要に応じてスタイルを適用します。

$('.input_field').change(function(){ 
    if((this.id=='id_email' && !validEmail(this.value)) 
     || (this.id=='id_last_name' && this.value.length == 0) 
     || (this.id=='id_phone' && this.value.length == 0) 
    ){  
     $(this).addClass('invalid'); 
     $(this).removeClass('valid'); 
    } 
    else{ 
     $(this).addClass('valid'); 
     $(this).removeClass('invalid'); 
    }   
}); 

JSFiddle