更有效地編寫這個javascript的方法

Question

我正在為我的網站創建一個聯系表單，並在提交之前使用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");
    }
});

如果所有字段都填寫好，我怎樣才能更有效地寫這個並發出警報顯示，謝謝。

Answer 1

$("#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");
    }
});

Answer 2

glavic和matt的答案正是我要提出的建議，除了我會通過將邏輯與演示文稿分開來更進一步。

在字段中包含無效條目時，在css中定義類，並使用$.addClass()或$.removeClass()添加或刪除該類

Answer 3

由於您使用的是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.");
}

Answer 4

為它們提供一個公共類，定義應用樣式的類，並執行以下操作：

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><br>
<input class="validate"><br>
<input class="validate"><br>
<input class="validate"><br>
<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');
    }
});

Answer 5

您可以使用jQuery迭代每個對象並獲取它們的值。 根據您的表單，此代碼將更改，但它是為您提供示例。 我可能在這里和那里都缺少幾個括號，但概念就在那里。

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');
                }
           });

Answer 6

我可能會把它的一部分分成我的css文件。 如果任何字段為空，則向對象添加類似“empty”的類，如果沒有，則將其刪除。 然后在你的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) {
}

編輯：

你去，為你修好。