CODEWITHSUNDEEP
javascriptjqueryhtml
Kobe Bryan
Kobe Bryan

Reputation: 317

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!

Upvotes: 1

Views: 105

Answers (2)

brk
brk

Reputation: 50291

Use an array and store the DOM object. on click of submit button, loop through the array , check it's value and apply the 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

Upvotes: 1

Angelos Chalaris
Angelos Chalaris

Reputation: 6747

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!

Upvotes: 1

Related Questions