このJavaScriptを書くより効率的な方法

私は私のウェブサイトのためのコンタクトフォームを作成しています。そして、それを提出する前に検証の最初のレイヤーにjavascriptを使用しています。これはphp経由でもう一度チェックされますが、比較的新しいjavascriptです。

$("#send").click(function() {
    var fullname = $("input#fullname").val();
    var email = $("input#email").val();
    var subject = $("input#subject").val();
    var message = $("textarea#message").val();
    if (fullname == ""){
        $("input#fullname").css("background","#d02624");
        $("input#fullname").css("color","#121212");
    }else{
        $("input#fullname").css("background","#121212");
        $("input#fullname").css("color","#5c5c5c");
    }
    if (email == ""){
        $("input#email").css("background","#d02624");
        $("input#email").css("color","#121212");
    }else{
        $("input#email").css("background","#121212");
        $("input#email").css("color","#5c5c5c");
    }
    if (subject == ""){
        $("input#subject").css("background","#d02624");
        $("input#subject").css("color","#121212");
    }else{
        $("input#subject").css("background","#121212");
        $("input#subject").css("color","#5c5c5c");
    }
    if (message == ""){
        $("textarea#message").css("background","#d02624");
        $("textarea#message").css("color","#121212");
    }else{
        $("textarea#message").css("background","#121212");
        $("textarea#message").css("color","#5c5c5c");
    }
    if (name && email && subject && message != ""){
        alert("YAY");
    }
});

どのようにこれをより効率的に書いて、すべてのフィールドが記入された場合に警告を表示することができます、ありがとう。

6
あなたはこれを知っています: if(name && email && subject && message!= "")は空の文字列に対してこれらの変数をすべて比較しているわけではなく、 message だけです。 if(someVar)という理由で、あなたのやり方は変わらないでしょう。 if(name!= "" && email!= "" && subject!= "" && message!= " someVar が "truthy"の値に強制的に変換され、空でない文字列が "真実"であるかどうかを調べるためにテストします。 >メッセージ!=最後の ""メッセージです。 (または、 name fullname に変更して変数宣言に一致させると、あなたの方法
追加された 著者 nnnnnn,

6 答え

$("#send").click(function() {
    var failed = false;

    $('input#fullname, input#email, input#subject, textarea#message').each(function() {
        var item = $(this);
        if (item.val()) {
            item.css("background","#121212").css("color","#5c5c5c");
        } else {
            item.css("background","#d02624").css("color","#121212");
            failed = true;
        }
    });

    if (failed){
        alert("YAY");
    }
});
4
追加された
少なくとも1つの要素が空の場合はTRUEになります。ですから(失敗した)場合にのみif(!失敗)に固定する必要があります。私はYAYがエラーだと思った;-)
追加された 著者 Glavić,
私がLyndonの投稿にコメントを書いたように、クラスを使って、このような静的なCSSルールを使わないでください。 CSSルールはCSSファイルに属します;-)
追加された 著者 Glavić,
実際には、項目のすべてが設定されていれば元のコードすべての項目を設定する必要がありますが、 failed true false を入れ替えると、(pass)と思っています。
追加された 著者 J.C. Inacio,
複数のセレクタとチェインを表示するための+1。その機能は、コードを大幅に明確にします。
追加された 著者 k4t434sis,
他の人はあきらめてしまったようですが、他の解決策とは違って、これは修正されてからどのように意図されていたのでしょうか、助けてくれてありがとう、このページの新しいチャンピオンです!
追加された 著者 user955822,

glavicとmattの答えは私が提示しようとしていたものとまったく同じですが、私はそれを論理とプレゼンテーションから分離してさらに進めていきます。

Have classes defined in your CSS for when a field contains an invalid entry, and add or remove that class using $.addClass() or $.removeClass()

4
追加された
真実。私はJavaScriptの静的CSSオプションを使用しません。すべてのCSSは* .cssファイルです;-)
追加された 著者 Glavić,
^これは、エラーを示すためにあらかじめ定義されたクラスを実際に持つべきであることが分かっているので、私は常にこれを行っています。
追加された 著者 Matthew,

jQueryを使用しているので、空でない値(class = "required")を必要とする各フィールドにクラスを設定することをお勧めします。

次に、あなたはこのようなことをします:

var foundEmpty = false;
$(".required").each(function()
{
   if($(this).val())
   {
       foundEmpty=true;
       $(this).style("background-color", "red");
   }
});
if(foundEmpty)
{
  alert("One or more fields require a value.");
}
1
追加された

私はおそらくこれの一部を私のCSSファイルに分割するでしょう。いずれかのフィールドが空の場合は、オブジェクトに「空」のようなクラスを追加し、そうでない場合は削除します。あなたのCSSファイルで、次のような記述子を追加することができます:

input#fullname,
input#email {
   ...
}

input#fullname.empty,
input#email.empty {
    ...
}

jQuery addClass()とremoveClass()を使用できます。

次のようにループを追加できます。

var inputs = new Array();
inputs[0] = "input#fullname";
inputs[1] = "input#email";
inputs[2] = "input#subject";
inputs[3] = "textarea#message";
var complete = true;
for (var i = 0; i < 4; i++) {
    var value = $(inputs[0]).val();
    if (value.length > 0) {
        $(inputs[i]).removeClass("empty");
    } else {
        complete = false;
        $(inputs[i]).addClass("empty");
    }
}
if (complete) {
}

編集:

そこに行って、あなたのためにそれを固定しました。

1
追加された
このソリューションをMattのものと組み合わせることで、このコードはかなり安定したものになります。フォームにコントロールを追加する必要がある場合は、htmlとcssに追加するだけです。
追加された 著者 Godwin,
@RightSaidFred、私たちは、答えを探しているユーザーのためのエラーチェックコードではありません。正しいパスでそれらを取得します。私はエラーがあると予想したが、OPは、省略記号がjavascriptの有効な指示ではないことを理解することができ、小さいタイプミスをすると簡単に識別し修正することができると思う。
追加された 著者 Godwin,
「回答を探しているユーザーのエラーチェックコードはここにはありません」確かにそうです。そして私は楕円について全く話していませんでした。すべてのエラーは if(complete)ステートメントの上で発生します。
追加された 著者 RightSaidFred,
この答えはどのように受け入れられましたか?その少しのコードでは、 SyntaxError ReferenceError TypeError で絞り込むことができました。
追加された 著者 RightSaidFred,
私はちょうど気づいた、ありがとう@RightSaidFred
追加された 著者 user955822,
おかげで、これは私にとって大事なことです。配列にすべてのフィールド名を追加するとは思いませんでした。
追加された 著者 user955822,

それらに共通のクラスを与え、クラスを定義してスタイルを適用し、これを行います:

JS

$("#send").click(function() {
    $('.validate').attr("class", function() {
        return $(this).val() === "" ? "validate invalid" : "validate valid";
    });
    if( $('.invalid').length === 0 ) {
        alert('YAY');
    }
});

CSS

.valid {
    background:#121212;
    color:#5c5c5c
}

.invalid {
    background:#d02624;
    color:#121212;
}

HTML

<button id="send">SEND</button>
<input class="validate">
<input class="validate">
<input class="validate">
<input class="validate">

JSFIDDLE DEMO


少し効率的なアプローチ:

var validate = $('.validate');

$("#send").click(function() {
    validate.attr("class", function() {
        return $(this).val() === "" ? "validate invalid" : "validate valid";
    });
    if( validate.filter('.invalid').length === 0 ) {
        alert('YAY');
    }
});
1
追加された
@nblackburn:あなたはどちらのクラスですか?私が使った "validate" クラスの代わりに既存のクラスを使うことができます。また、 "valid" "invalid" などのクラスを追加することは無害です。ですから、 "your_current_class invalid" と "" your_current_class valid "にしてください。
追加された 著者 RightSaidFred,
@nblackburn:うん、私はそれをやめた。更新しました。
追加された 著者 RightSaidFred,
良い解決策ですが、すべてのフィールドが空でないかどうかをチェックして、スクリプトの次の部分を実行する方法(例:(complete){alert( "YAY");}
追加された 著者 user955822,
私は既に定義されているので、フォームフィールドに別のクラスを追加せずにこれを行うチャンスがあります。
追加された 著者 user955822,
ああ、私はあなたが検証したいフィールドに "validate"クラスを追加せずにコードを使う方法を教えています。私は複数のクラスを追加することができますが、見た目が乱雑になり始めているので、 。
追加された 著者 user955822,
例は正しく動作していないようですが、それは他の入力フィールドではなくテキストエリアのみを強調表示し、フィールドをクリックして修正すると、無効な色を残す代わりに別の場所をクリックするまで一時的に戻ります。私は再び送信をクリックします。
追加された 著者 user955822,

jQueryを使用して各オブジェクトを繰り返し処理し、その値を取得することができます。フォームに応じて、このコードは変更されますが、これは例を示すためのものです。私はおそらくここに2つの括弧がありませんが、そのコンセプトはそこにあります。

var objectName=$(this).attr('id');    
$('#formId').children().each(
        function(){

            if ($(this).value == ""){
                 $(this).css("background","#d02624");
                 $(this).css("color","#121212");
                 $error[objectName]='true';

            }else{
                 $(this).css("background","#121212");
                 $(this).css("color","#5c5c5c");
                 $error[objectName]='false';
            }




        }
    );
           $.each(error, function(key, value){


                if (value=='false'){
                  alert (key + 'is empty');
                }
           });
0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript