Более эффективный способ написания этого JavaScript - PullRequest
Новая
       6

Более эффективный способ написания этого JavaScript

6 голосов
/ 25 ноября 2011

Я создаю контактную форму для своего веб-сайта и использую 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 ]

4 голосов
/ 25 ноября 2011

Главные и Мэтт ответы были именно тем, что я собирался предложить, за исключением того, что я бы сделал еще один шаг, отделив логику от представления.

Определите классы в вашем CSS для случаев, когда поле содержит недопустимую запись, и добавьте или удалите этот класс, используя $.addClass() или $.removeClass()

4 голосов
/ 25 ноября 2011 
$("#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");
    }
});
1 голос
/ 25 ноября 2011

Предоставляя им общий класс, определите классы для применения стилей и сделайте следующее:

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');
    }
});
1 голос
/ 25 ноября 2011

Поскольку вы используете 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.");
}
0 голосов
/ 25 ноября 2011

Вы можете использовать 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');
                }
           });
0 голосов
/ 25 ноября 2011

Я бы, вероятно, разделил бы часть этого на мой файл 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) {
}

РЕДАКТИРОВАТЬ:

Вот и все, исправил это для вас.

...