Tworzę formularz kontaktowy dla mojej witryny i przy użyciu JavaScript do pierwszej warstwy walidacji przed przesłaniem go, który jest następnie sprawdzany przez PHP, ale jestem stosunkowo nowym w JavaScript, oto mój skrypt ...

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

Jak mogę pisać bardziej efektywnie i sprawić, że alarm pokazuje, jeśli wszystkie pola są wypełnione, dzięki.

6
user955822 25 listopad 2011, 04:52

5 odpowiedzi

Najlepsza odpowiedź
$("#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
Glavić 25 listopad 2011, 01:00

Prawdopodobnie podzielę część tego do mojego pliku CSS. Jeśli którykolwiek z pól jest pusty, dodaj klasę jak "pusty" do obiektu, jeśli nie, wyjmij go. Następnie w pliku CSS możesz dodać kilka deskryptorów takich jak:

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

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

Możesz użyć jQuery Addclass () i Removeclass ().

Następnie możesz dodać pętlę w następujący sposób:

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

EDYTOWAĆ:

Idziesz, naprawiasz to dla Ciebie.

-1
Godwin 25 listopad 2011, 01:57

Odpowiedzi Glavic i Matt były dokładnie tym, co zamierzałem sugerować, z wyjątkiem tego, że wziąłbym o krok dalej, oddzielając logikę z prezentacji.

Mieć klasy zdefiniowane w CSS, gdy pole zawiera nieprawidłowy wpis i dodać lub usunąć tę klasę za pomocą $.addClass() lub $.removeClass()

4
Mads Hansen 25 listopad 2011, 12:08

Dając im wspólną klasę, definiują zajęcia do zastosowania stylów i zrób to:

<”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


Trochę bardziej wydajne podejście:

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
RightSaidFred 25 listopad 2011, 01:54

Możesz użyć jQuery do itera na każdym obiekcie i uzyskaj ich wartości. W zależności od formularza ten kod się zmieni, ale ma to przykład. Prawdopodobnie brakuje tu kilku wsporników tutaj i tam, ale tam jest koncepcja.

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
Joseph Szymborski 25 listopad 2011, 01:17