JQuery Fehler-Trap Logic

Question

$(document).ready(function() { 
 
    $(".submit").click(function() { 
 
    if($(".firstname").val()=='' && $(".gender").val()==0){ 
 
     $(".regform input.firstname, .regform select.gender").css('border','3px solid red'); 
 
    }else { 
 
     $(".regform input.firstname, .regform select.gender").css('border','2px solid #78bdca'); 
 
    } 
 
    if($(".firstname").val()!='') { 
 
     $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({ 
 
     display: "block" 
 
     }); \t 
 

 
     $(".submit").prop('value', 'Submit'); 
 
    } 
 
    }); 
 
});

.steps { 
 
    margin-bottom: 5px; 
 
\t text-align: center; 
 
} 
 

 
.regform select { 
 
\t width: 380px; 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t -webkit-border-radius: 7px; 
 
\t -moz-border-radius: 7px; 
 
\t border-radius: 7px; 
 
\t border: #78bdca 2px solid; 
 
\t font-family: 'quicksandregular'; 
 
\t font-size: 16px; 
 
\t padding: 12px 0 12px 12px; 
 
\t color: #78bdca; 
 
\t background: #fff url(/images/assets/hcd-dropdown.png) 96% 50% no-repeat; 
 
\t background-size: 15px auto; 
 
\t -webkit-appearance: none; 
 
\t -moz-appearance: button; 
 
\t appearance: button; 
 
\t text-overflow: ''; 
 
} 
 

 
.regform input { 
 
\t width: 380px; 
 
\t margin: 0 auto; 
 
\t display: block; 
 
\t -webkit-border-radius: 7px; 
 
\t -moz-border-radius: 7px; 
 
\t border-radius: 7px; 
 
\t border: #78bdca 2px solid; 
 
\t font-family: 'quicksandregular'; 
 
\t font-size: 16px; 
 
\t padding: 12px 0 12px 12px; 
 
\t color: #78bdca; 
 
} 
 

 
.regform select[name=dobday], .regform select[name=dobmonth], .regform select[name=dobyear] { 
 
    width: 124.5px; 
 
\t display: inline-block; 
 
} 
 

 
.steps.step3, .steps.step4, .steps.step5 { 
 
\t display: none; 
 
} 
 

 
.submit .myButton { 
 
\t -webkit-appearance: button; 
 
\t cursor: pointer; 
 
\t width: 380px; 
 
\t color: #fff; 
 
\t font-family: 'quicksandregular'; 
 
\t font-size: 16px; 
 
    height: 44px; 
 
\t outline: 0; 
 
\t border: none; 
 
\t background: rgba(120, 189, 202, .9); 
 
\t padding: 0; 
 
}

Ich mag würde für etwas Hilfe mit einer Logik fragen. Ich bin ein Neuling auf JS

Logic:

Wenn Sie den Absenden-Button klicken, wenn die zwei Elemente keinen Wert haben, ich es auf einem roten Rand machen (was ich erreicht habe.) um den Fehler zu betonen. Nun, wenn ich einen Wert von einem der genannten Elemente ansetze, wollte ich einen roten Rand des Elements ohne Wert hinterlassen.

Dies ist mein Code:

$(document).ready(function() { 
 
\t $(".submit").click(function() { 
 
\t \t if($(".firstname").val()=='' && $(".gender").val()==0){ 
 
\t \t \t $(".regform input.firstname, .regform select.gender").css('border','3px solid red'); 
 
\t \t }else { 
 
\t \t \t $(".regform input.firstname, .regform select.gender").css('border','2px solid #78bdca'); 
 
\t \t } 
 
\t \t if($(".firstname").val()!='') { 
 
\t \t $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({ 
 
\t \t \t display: "block", 
 
\t \t \t visibility: "visible" 
 
\t \t }); \t 
 

 
\t \t $(".submit .myButton").prop('value', 'Submit'); 
 
\t \t } 
 
\t }); 
 
});

Schätzen Sie Ihre Hilfe!

Answer 1

Sie müssen nur ihre Eingabe überprüfen getrennt:

$(document).ready(function() { 
    $(".submit").click(function() { 
     // Check for firstname input state 
     if($(".firstname").val()==''){ 
      // Not filled, change to red 
      $(".regform input.firstname").css('border','3px solid red'); 
     } 
     else{ 
      // Filled, change to blue 
      $(".regform input.firstname").css('border','2px solid #78bdca'); 
     } 
     // Check for gender input state 
     if($(".gender").val()==0){ 
      // Not filled, change to red 
      $(".regform select.gender").css('border','3px solid red'); 
     } 
     else{ 
      // Filled, change to blue 
      $(".regform select.gender").css('border','2px solid #78bdca'); 
     } 
    }); 
}); 

Also, jeder von ihnen hat seine eigene Prüfzustand haben und wenn sie richtig ausgefüllt wird blau werden, sonst wird es rot. Ein vollständiges Beispiel ist auch in diesem JSFiddle.

S.S .: Ich entfernte einige Bits von Ihrem Javascript/jQuery-Code, da sie mir hinsichtlich der Funktionalität unklar waren. Fühlen Sie sich frei, sie wieder hinzuzufügen, wo sie sein sollten.

P.S.2: In meinem Fiddle ich änderte auch die .submit Klasse von den div-.submit-div und hinzugefügt, um die .submit Klasse Ihrer Taste. Wenn Sie es lieber auf die originale Art und Weise haben möchten, wechseln Sie entsprechend mit dem von mir angegebenen Code zurück!

Answer 2

Verwenden Sie ein Array und speichern Sie das DOM-Objekt. auf Schaltfläche anklickt, Schleife durch das Array einreichen, überprüfen Sie es Wert ist und wenden Sie die CSS

$(document).ready(function() { 
     $(".submit").click(function() { 
      // An array to store DOM object 
      var inpElem = [$(".firstname"), $(".gender")] 
      // Iterate through it and check it's value 
      inpElem.forEach(function(item) { 
       console.log(item.val) 
       if (item.val() == '') { 
        item.css('border', '3px solid red'); 
       } else { 
        item.css('border', '2px solid #78bdca'); 
       } 
      }) 
      if ($(".firstname").val() != '') { 
       $(".steps.step3, .steps.step4, .steps.step5").fadeIn(1000).css({ 
        display: "block", 
        visibility: "visible" 
       }); 

       $(".submit .myButton").prop('value', 'Submit'); 
      } 
     }); 
    }); 

jsfiddle