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) {
}

编辑：

你去，为你修好。

更有效地编写这个javascript的方法

6 个答案: