Erico Timbang Erico Timbang - 5 months ago 18
jQuery Question

Jquery Error Trap Logic



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

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

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

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

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

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

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

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





I would like to ask for some help with a logic. I'm a newbie on JS

Logic:

If you click the submit button, if the 2 elements doesn't have any value, I make it on a red border(which i've achieved.) to emphasized the error. Now, when I put a value of one of the element said, I wanted to make a red border of the element left with no value.

This is my code:



$(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",
visibility: "visible"
});

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





Appreciate your help!

Answer

You have to just check their input separately:

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

So, each one of them will have its own checking condition and if filled out properly will turn blue, otherwise it will turn red. Also, a full example is in this JSFiddle.

P.S.: I removed some bits from your Javascript/jQuery code as they were unclear to me in terms of functionality. Feel free to add them again where they should be.

P.S.2: In my Fiddle I also changed the .submit class from the div to .submit-div and added the .submit class to your button. If you would rather have it the original way, change back accordingly along with the code I provided!

Comments