javascript - 编写此 javascript 的更有效方法

标签 javascript jquery forms validation

我正在为我的网站创建一个联系表单,并在提交之前使用 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");
    }
});

如果所有字段都已填写,我如何才能更有效地编写此代码并显示警报,谢谢。

最佳答案

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

关于javascript - 编写此 javascript 的更有效方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8263861/

相关文章:

javascript - Reactjs - 如何在重用组件中正确处理键

javascript - Angularjs 中的并发

javascript - jQuery 慢慢淡入淡出,暂停,然后重复

php - 动态添加/删除新的表单输入

javascript - 覆盖 Sencha Touch 类

javascript - 在 Bootstrap Modal 中将值传递给表单

jquery - 如何将一些 html 添加到表格单元格 (td) 的开头?

jquery - 尝试加载 json 时 jqGrid 给出异常

python - Tornado 不接受POST方法

JavaScript 确认何时在表单中选择动态 HTML 字段