Javascript - Failed to validate multiple inputs which link to one another

I’m stuck at validating dropdownlist, radio button and datepicker which provide different values when user click on the dropdownlist.

checkout.php

    <form name="shippingForm" method="post" id="shippingForm"
    					onsubmit="return chkForm(this)">
    					<p>Title</p>
    					<select name="inputtitle" class="inputtitle" id="inputtitle">
    						<option value="Mr"
    							<?php if($memberInfo['gender'] == 'male'){ echo 'selected'; } ?>>Mr.</option>
    						<option value="Mrs">Mrs.</option>
    						<option value="Ms"
    							<?php if($memberInfo['gender'] == 'female'){ echo 'selected'; } ?>>Ms.</option>
    					</select> <br>
    					<p>First Name</p>
    					<input id="SfirstName" class="fname" name="recipientFirstName"
    						type="text" placeholder="First Name "
    						value="<?php echo isset($memberInfo['firstName']) ? $memberInfo['firstName'] : '' ?>"><br>
    					<p>Last Name</p>
    					<input id="SlastName" class="lname" name="lname" type="text"
    						placeholder="Last Name "
    						value="<?php echo isset($memberInfo['lastName']) ? $memberInfo['lastName'] : '' ?>">
    					<br>
    					<div class="checkitem">
    						<div class="labelitem-left">
    							<p>Postal*</p>
    						</div>
    						<div class="labelitem-right">
    							<p>Unit Number*</p>
    						</div>
    					</div>
    					<div class="inputitem">
    						<div class="inputitem-left">
    							<input id="postal" name="postal" type="text" class="input-left"
    								value="<?php echo isset($memberInfo['details'][0]['billingPostal']) ? $memberInfo['details'][0]['billingPostal'] : '' ?>">
    						</div>
    						<div class="inputitem-right">
    							<input id="unitNum" name="unitNum" type="text"
    								class="input-right"
    								value="<?php echo isset($memberInfo['details'][0]['billingAddr2']) ? $memberInfo['details'][0]['billingAddr2'] : '' ?>">
    						</div>
    					</div>
    					<p>Address</p>
    					<input id="addr" class="address" name="addr" type="text"
    						placeholder="Address"
    						value="<?php echo isset($memberInfo['details'][0]['billingAddr1']) ? $memberInfo['details'][0]['billingAddr1'] : '' ?>"><br>
    					<div class="checkitem">
    						<div class="labelitem-left">
    							<p>Mobile Number</p>
    						</div>
    						<div class="labelitem-right">
    							<p>Home Number*</p>
    						</div>
    					</div>
    					<div class="inputitem">
    						<div class="inputitem-left">
    							<input id="mobileNum" name="mobileNum" " type="text"
    								class="input-left"
    								onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 0"
    								placeholder="Mobile Number "
    								value="<?php echo isset($memberInfo['details'][0]['billingContactMobile']) ? $memberInfo['details'][0]['billingContactMobile'] : '' ?>">
    						</div>
    						<div class="inputitem-right">
    							<input id="homeNum" name="homeNum" type="text"
    								onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 0"
    								placeholder="Home Number " class="input-right"
    								value="<?php echo isset($memberInfo['details'][0]['billingContactHome']) ? $memberInfo['details'][0]['billingContactHome'] : '' ?>">
    						</div>
    					</div>
    					<div class="checkitem">
    						<div class="labelitem-left">
    							<p>Acquirement Method</p>
    						</div>
    						<div class="labelitem-right">
    							<p id="dDate-label">Delivery Date</p>
    							<p id="pDate-label" style="display: none;">Pickup Date</p>
    						</div>
    					</div>
    					<div class="inputitem">
    						<div class="inputitem-left">
    							<select name="method" class="input-left" id="method">
    								<option value="false">Delivery</option>
    								<option value="true">Pickup at outlet</option>
    							</select>
    						</div>
    						<div class="inputitem-right">
    							<input id="dDate" name="dDate" min="<?php echo date("Y-m-d");?>"
    								type="date" class="input-right"
    								value="<?php echo $user_profile["dDate"]; ?>"> <input id="pDate"
    								name="pDate" min="<?php echo date("Y-m-d");?>" type="date"
    								class="input-right" style="display: none;"
    								value="<?php echo $user_profile["pDate"]; ?>">
    						</div>
    					</div>
    					<div id="pickup-time" style="display: none;">
    						<p id="pTime-label">Pickup Time</p>
    						<br> <input type="radio" class="radiodtime" name="pTime"
    							value="anytime" id="radiodtime"> Anytime between <select
    							name="pTime" class="dtime" id="ptime">
    							<option value="12pm-3pm"
    								<?php if($user_profile['dtime'] == '12pm-3pm'){ echo 'selected'; } ?>>12
    								pm - 3 pm</option>
    						</select> <br> <br>
    					</div>
    					<div id="delivery-time">
    						<br>
    						<p id="dTime-label">Delivery Time</p>
    						<br> <input type="radio" class="radiodtime" name="dtime"
    							value="anytime" id="radioptime"> Anytime between <select
    							name="dtime" class="dtime" id="dtime">
    							<option value="12pm-3pm"
    								<?php if($user_profile['dtime'] == '12pm-3pm'){ echo 'selected'; } ?>>12
    								pm - 3 pm</option>
    							<option value="3pm-5pm"
    								<?php if($user_profile['dtime'] == '3pm-5pm'){ echo 'selected'; } ?>>3
    								pm - 5 pm</option>
    							<option value="5pm-7pm"
    								<?php if($user_profile['dtime'] == '5pm-7pm'){ echo 'selected'; } ?>>5
    								pm - 7 pm</option>
    						</select> <br> <br> <input type="radio" name="dtime"
    							value="anytime"> Specifically at <select name="dtime"
    							class="dtime" id="dtime">
    							<option value="1"
    								<?php if($user_profile['dtime'] == '1'){ echo 'selected'; } ?>>&nbsp;1</option>
    							<option value="2"
    								<?php if($user_profile['dtime'] == '2'){ echo 'selected'; } ?>>&nbsp;2</option>
    							<option value="3"
    								<?php if($user_profile['dtime'] == '3'){ echo 'selected'; } ?>>&nbsp;3</option>
    							<option value="4"
    								<?php if($user_profile['dtime'] == '4'){ echo 'selected'; } ?>>&nbsp;4</option>
    							<option value="5"
    								<?php if($user_profile['dtime'] == '5'){ echo 'selected'; } ?>>&nbsp;5</option>
    							<option value="6"
    								<?php if($user_profile['dtime'] == '6'){ echo 'selected'; } ?>>&nbsp;6</option>
    							<option value="7"
    								<?php if($user_profile['dtime'] == '7'){ echo 'selected'; } ?>>&nbsp;7</option>
    							<option value="8"
    								<?php if($user_profile['dtime'] == '8'){ echo 'selected'; } ?>>&nbsp;8</option>
    
    						</select>&nbsp;PM <br>
    						<div
    							style="margin-left: 35%; margin-bottom: 10px; font-size: 15px;">+
    							/ - 30 minutes</div>
    					</div>
<button class="checkout" type="submit" value="Continue"
						style="margin-left: 100%; margin-top: 5%; float: right;"
						id="continue" name="continue" onclick="return chkForm()">Continue</button>

js

    function chkForm(form) {
    	if(form.SfirstName.value == "" && form.SlastName.value == "" && form.postal.value == "" && form.unitNum.value == "" && form.addr.value == "" && form.mobileNum.value == "" ) {
    		  alert("Please fill up the requirements");
    		     form.SfirstName.focus();
    		     return false;
    	}
    	
    	if(form.SlastName.value == "") {
    		 alert("Error: Last Name cannot be blank!");
    		    form.SlastName.focus();
    		  	return false;
    	}
    	if(form.postal.value == "") {
    		 alert("Error: Postal Code cannot be blank!");
    		    form.postal.focus();
    		  	return false;
    	}
    	if(form.unitNum.value == "") {
    		 alert("Error: Unit Number cannot be blank!");
    		    form.unitNum.focus();
    		  	return false;
    	}	
    	if(form.addr.value == "") {
    		 alert("Error: Address cannot be blank!");
    		    form.addr.focus();
    		  	return false;
    	}	
    	if(form.mobileNum.value == "") {
    		 alert("Error: Mobile Number cannot be blank!");
    		    form.mobileNum.focus();
    		  	return false;
    	}
    
    	if(form.method.value=="false") {
    		if(form.dDate.value == "") {
    			 alert("Error: Please choose the delivery date!");
    			    form.dDate.focus();
    			  	return false;
    		}
    	} else if(form.method.value=="true"){
    	if(form.pDate.value == "") {
    		 alert("Error: Please choose the pickup date!");
    		    form.pDate.focus();
    		  	return false;
    		}
    	}

var firstName=document.getElementById('SfirstName').value;
	var lastName=document.getElementById('SlastName').value;
	var postal=document.getElementById('postal').value;
	var unitNumber=document.getElementById('unitNum').value;
	var address=document.getElementById('addr').value;
	var mobileNumber=document.getElementById('mobileNum').value;
	var dDate=document.getElementById('dDate').value;

return false;
}
</script>

Delivery
enter image description here

i tried using required, but it didn’t works

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.