Javascript: Validate certain field and copy over the field if it's similar not working

Snuraini_Yakob · January 6, 2016, 4:14am

My form is unable to validate. When i click the continue button it will straight away proceed to the next page. The scenario is when user click the Continue button without filling the details, it will direct user to fill in the form based on the validation. There’s a checkbox which enable to copy the top fields to the recipient fields. I couldn’t spot the error.

checkout.php

		<form name="shippingForm" method="post" id="shippingForm"
				onsubmit="return chkForm(this)">
				<select name="inputtitle" class="inputtitle" id="inputtitle">
					<option value="Mr"
						<?php if($memberInfo['title'] == 'Mr'){ echo 'selected'; } ?>>Mr.</option>
					<option value="Mrs"
						<?php if($memberInfo['title'] == 'Mrs'){ echo 'selected'; } ?>>Mrs.</option>
					<option value="Ms"
						<?php if($memberInfo['title'] == 'Ms'){ 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]['billingAddr1']) ? $memberInfo['details'][0]['billingAddr1'] : '' ?>">
					</div>
				</div>
				<p>Address</p>
				<input id="addr" class="address" name="addr" type="text"
					placeholder="Address"
					value="<?php echo isset($memberInfo['details'][0]['billingAddr2']) ? $memberInfo['details'][0]['billingAddr2'] : '' ?>"><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>Delivery 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" type="date" class="input-right"
							value="" value="<?php echo $user_profile["dDate"]; ?>">
					</div>
				</div>
				<br>Delivery Time* <br> <br> <input type="radio" class="radiodtime"
					name="dtime" value="anytime">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 class="checkoutbox"
					style="padding-top: 10px; padding-bottom: 10px;">
					<input type="checkbox" name="agree" id="agree"
						onclick="FillCheckout(this)">&nbsp;&nbsp;Tick here, if
					Recipient's address is the same as Sender's address.
				</div>

				<div class="checkitem">
					<div class="labelitem-left">
						<p>Recipient Title</p>
					</div>
				</div>
				<div class="inputitem">
					<select name="Rtitle" class="inputtitle" id="Rtitle">
						<option value="Mr"
							<?php if($memberInfo['title'] == 'Mr'){ echo 'selected'; } ?>>Mr.</option>
						<option value="Mrs" zz
							<?php if($memberInfo['title'] == 'Mrs'){ echo 'selected'; } ?>>Mrs.</option>
						<option value="Ms"
							<?php if($memberInfo['title'] == 'Ms'){ echo 'selected'; } ?>>Ms.</option>
					</select> <br>
					<p>Recipient's First Name</p>
					<input id="RfirstName" class="fname" name="recipientFirstName"
						type="text" placeholder="First Name "
						value="<?php echo isset($memberInfo['firstName']) ? $memberInfo['firstName'] : '' ?>"><br>
					<p>Recipient's Last Name</p>
					<input id="RlastName" class="lname" name="recipientLastName"
						type="text" placeholder="Last Name "
						value="<?php echo isset($memberInfo['lastName']) ? $memberInfo['lastName'] : '' ?>">
				</div>

				<div class="checkitem">
					<div class="labelitem-left">
						<p style="text-align: initial;">Recipient's Mobile Number*</p>
					</div>
					<div class="labelitem-right">
						<p>Recipient's Postal*</p>
					</div>
				</div>
				<div class="inputitem">
					<div class="inputitem-left">
						<input id="RmobileNum" name="RmobileNum" type="text"
							class="input-left"
							onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 0"
							placeholder="+65 "
							value="<?php echo isset($memberInfo['details'][0]['billingContactMobile']) ? $memberInfo['details'][0]['billingContactMobile'] : '' ?>">
					</div>
					<div class="inputitem-right">
						<input id="Rpostal" name="Rpostal" type="text"
							class="input-right" value=""
							onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 0"
							value="<?php echo isset($memberInfo['details'][0]['billingPostal']) ? $memberInfo['details'][0]['billingPostal'] : '' ?>">
					</div>
				</div>

				<div class="checkitem">
					<div class="labelitem-left">
						<p style="text-align: initial;">Recipient Unit Number*</p>
					</div>
					<div class="labelitem-right">
						<p>Recipient Address*</p>
					</div>
				</div>
				<div class="inputitem">
					<div class="inputitem-left">
						<input id="RunitNum" name="RunitNum" type="text"
							class="input-left"
							value="<?php echo isset($memberInfo['details'][0]['billingPostal']) ? $memberInfo['details'][0]['billingPostal'] : '' ?>">
					</div>
					<div class="inputitem-right">
						<input id="Raddr" name="Raddr" type="text" class="input-right"
							value="<?php echo isset($memberInfo['details'][0]['billingAddr2']) ? $memberInfo['details'][0]['billingAddr2'] : '' ?>">
					</div>
				</div>
				<div style="float: right; padding-top: 40px;" class="g-recaptcha"
					data-sitekey="6LetxQsTAAAAAD4xOk_Yd2B1s1kbK7wLP4OnatXg" required></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
			
			</form>

js

<script type="text/javascript">
function chkForm(form) {
	if(form.inputtitle.value == "" && form.SfirstName.value == "" && form.SlastName.value == "" && form.postal.value == "" && form.unitNum.value == "" && form.addr.value == "" && form.mobileNum.value == "") {
		  alert("Please fill in the required fields: \n\u26AC Name \n\u26AC Email \n\u26AC Subject \n\u26AC Message");
		     form.inputtitle.focus();
		     return false;
	}
	 if(form.SfirstName.value == "") {
	     alert("Error: First Name cannot be blank!");
	     form.SfirstName.focus();
	     return false;
	   }
	   
	 if(form.SlastName.value == "") {
	     alert("Error: First 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;
	   }
}
</script>

<script type="text/javascript">
function FillCheckout(form)
{
  var inputtitle = document.getElementById('inputtitle');
  var fname = document.getElementById('SfirstName');
  var lname = document.getElementById('SlastName');
  var postal = document.getElementById('postal');
  var unitNum = document.getElementById('unitNum');
  var addr = document.getElementById('addr');
  var mobileNum = document.getElementById('mobileNum');

  var recipientTitle = document.getElementById('Rtitle');
  var recipientFirstName = document.getElementById('RfirstName');
  var recipientLastName = document.getElementById('RlastName');
  var RmobileNum = document.getElementById('RmobileNum');
  var Rpostal = document.getElementById('Rpostal');
  var RunitNum = document.getElementById('RunitNum');
  var Raddr = document.getElementById('Raddr');
   
  Rtitle.value = inputtitle.value;
  RfirstName.value = SfirstName.value;
  RlastName.value = SlastName.value;
  RmobileNum.value = mobileNum.value;
  Rpostal.value = postal.value;
  RunitNum.value = unitNum.value;
  Raddr.value = addr.value;
}
</script>

felgall · January 6, 2016, 4:48am

Try using onsubmit instead of onclick.

Snuraini_Yakob · January 6, 2016, 4:50am

under my <button>? but i use onsubmit under my <form> Wouldn’t it clash?

felgall · January 6, 2016, 4:53am

That’s what is causing the problem now. The onclick on the button and the onsubmit on the form both try to run at the same time (since the button submits the form). Get rid of it off of the button completely.

Snuraini_Yakob · January 6, 2016, 5:00am

It doesn’t work… Did you get to spot if there’s error in the naming? I see there’s no wrong.

Snuraini_Yakob · January 6, 2016, 8:51am

Does that mean under <button> i don’t have to even include any onsubmit = "return chkForm"? I still facing the same error and tried doing different method but it loop back to checkout page instead of the next page which data send is success.

felgall · January 6, 2016, 9:30pm

It would be far simpler to maintain if you stopped jumbling the HTML and JavaScript together at all.

All you need is to have the script attached to the bottom of the HTML just before the </body> tag and to put a submit event listener in the script itself and get rid of ALL the JavaScript jumbled with the HTML including onclick, onsubmit and any other jumbled code.

Snuraini_Yakob · January 7, 2016, 8:05am

It’s okay! ThankYou very much! I’ve solve my problems. However, right now i’m working on how to validate radio button, dropdownlist and datepicker. It’s not working. The scenario is when user choose deliver method, the form will automatically display delivery date and it’s delivery time. Vise versa if user choose pickup method, form will display pickup date and it’s pickup time.

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

js

function chkForm(form) {
    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;
    		}
    	}
return false;
}

felgall · January 7, 2016, 8:44pm

That doesn’t exist - form.method will have a value of POST or GET but will not have a value property attached to it.

Snuraini_Yakob · January 8, 2016, 2:27am

That have been solve already. Right now i’m figuring out on how to validate the radio button. This is because if you through my code when user choose Delivery as the aquirement method, there will be two different radio button and user required to click on one of the button while if user choose pickup as their aquirement method, there will only be one radio button and user are required to click on it before proceeding with filling up the form.

Snuraini_Yakob · January 8, 2016, 8:04am

 if (!form.radiodtime[0].checked && !form.radiodtime[1].checked) {
			    alert("Please select an option."); 
			    return false;
			  }

What are suitable ways for me to validate a single radio button using the example as shown above?

markbrown4 · January 8, 2016, 9:37am

CSS selectors are an easy way to get the checked radio’s value.

document.querySelector('.radiodtime:checked').value

system · April 8, 2016, 4:48pm

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