修改移动端TM表单

application/views/orders/tailormademobile.php

@@ -1,4 +1,4 @@
-<link href="https://data.asiahighlights.com/min/?f=/css/inquiry-form-mobile.css" rel="stylesheet">
+<link href="/min/?f=/css/inquiry-form-mobile.css" rel="stylesheet">
 <div id="formBanner">
 	<img src="https://data.asiahighlights.com/image/tm-banner-mobile.jpg"
 	alt="india kids" width="100%">
@@ -14,11 +14,13 @@
 		<h2>
 			Your Travel Ideas
 		</h2>
-		<h3>
+		<h3 id="destination_select">
 			Choose your interested destinations *
+			
 		</h3>
 		<form action="/orders/tailormade_save/" method="POST" class="travelTag">
 		<div class="selectionBlock">
+			<span id="destination_error_msg" style="color:#a31022;font-size:18px;" class="hidden">(Please select an option.)</span>
 			<?php foreach ($countrylist as $moreCity){
 				echo '<div class="checkboxLabel">';
 				echo '<input type="checkbox" value="'.$moreCity.'" id="'.$moreCity.'" name="destination[]" />';
@@ -31,8 +33,8 @@
 		<div class="clear">
 		</div>
 		<div class="selectionBlock">
-			<h3>
+			<h3 id="hotelselect">
-				Your hotel preference *
+				Your hotel preference * <span id="hotel_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please select an option.  )</span>
 			</h3>
 			<span class="formNote">
 				Hotels prices in Japan are at least doubled based on the suggested rates
@@ -73,14 +75,15 @@
 				</div>
 		</div>
 		<div class="selectionBlock">
-			<h3>
+			<h3 id="numberselect">
 				Number in your group * 
 			</h3>
+			<span id="number_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill in this field.   )</span>
 			<div class="peopleSelect">
 				<span class="formMemo">
 					Adults (≥12 years old)
 				</span>
-				<input class="number" type="text" value="2" οnblur="checkNumber(this)"
+				<input class="number" type="text" value="0" οnblur="checkNumber(this)"
 				name="adultnumber" />
 				<div class="numberBtn">
 					<input class="minaddBtn reduceadult" type="button" value="-" />
@@ -103,7 +106,7 @@
 				Your date of arrival *
 			</h3>
 			<input type="date" class="arrivalDate visible-xs" id="Date_Start" name="Date_Start_Mobile"
-			value="<?php echo date('Y-m-d',time() + 24*3600*7)?>" min="<?php echo date('Y-m-d',time() + 24*3600*7)?>" placeholder="mm/dd/yyyy" autocomplete="off">
+			value="<?php echo date('Y-m-d',time() + 24*3600*7)?>" min="<?php echo date('Y-m-d',time() + 24*3600*7)?>" placeholder="mm/dd/yyyy" autocomplete="off" required />
 			<div class="checkYes">
 				<input type="checkbox" class="checkBorder" id="dateLimit" name="time">
 				<label for="dateLimit" class="checkBlock">
@@ -241,12 +244,14 @@
 					</label>
 				</div>
 		</div>
+		<span id="name_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field.   )</span>
 		<div class="inputTerm">
 			<input type="text" name="name" required>
 			<label>
 				Full Name *
 			</label>
 		</div>
+		<span id="email_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field.   )</span>
 		<div class="inputTerm">
 			<input type="email" name="email" required>
 			<label>
@@ -256,8 +261,9 @@
 		<span class="formMemo">
 			Your trip advisor will talk with you via email first.
 		</span>
+		<span id="nation_error_msg" style="color:#a31022;font-size:18px;" class="hidden">( Please fill out this field.   )</span>
 		<div class="inputTerm">
-			<input type="text" name="nationality" required>
+			<input type="text" name="Nationality" required>
 			<label>
 				Nationality *
 			</label>
@@ -279,7 +285,7 @@
 			</label>
 		</div>
 		<div class="inquiryBtn">
-			<input type="submit" value="Start My Journey">
+			<button id="tmsubmit" href="javascript:;">Start My Journey</button>
 			<input type="hidden" name="url" value="<?php echo $orderfrom;?>" />
 		</div>
 		</form>
@@ -345,5 +351,86 @@ $(function(){
 		
 		$('.destination').html(destinantionstr);
 	});
+	
+	//表单验证
+	$('#tmsubmit').click(function(){
+		var adultnumber = $('input[name="adultnumber"]').val();
+		var hotel = $('input[name="hotel"]:checked').val();
+		var destinations = $('input[name="destination[]"]').is(":checked");
+		var name = $('input[name="name"]').val();
+		var email = $('input[name="email"]').val();
+		var Nationality = $('input[name="Nationality"]').val();
+		
+		//目的地选择
+		if(destinations === false){
+			$("body,html").animate({
+                scrollTop: $('#destination_select').offset().top - 70
+            });
+			$('#destination_error_msg').removeClass('hidden');
+			setTimeout(function(){
+				$('#destination_error_msg').addClass('hidden');
+			},5000);
+			return false;
+		}
+		
+		//酒店选择
+		if(hotel === undefined){
+			$("body,html").animate({
+                scrollTop: $('#hotelselect').offset().top - 70
+            });
+			$('#hotel_error_msg').removeClass('hidden');
+			setTimeout(function(){
+				$('#hotel_error_msg').addClass('hidden');
+			},5000);
+			return false;
+		}
+		
+		//人数选择
+		if(adultnumber < 1){
+			console.log('123');
+			$("body,html").animate({
+                scrollTop: $('#numberselect').offset().top - 70
+            });
+			$('#number_error_msg').removeClass('hidden');
+			setTimeout(function(){
+				$('#number_error_msg').addClass('hidden');
+			},5000);
+			return false;
+		}
+		
+		//姓名验证
+		if(name == ''){
+			console.log('123');
+			$('input[name="name"]').focus();
+			$('#name_error_msg').removeClass('hidden');
+			setTimeout(function(){
+				$('#name_error_msg').addClass('hidden');
+			},5000);
+			return false;
+		}
+		
+		//邮箱验证
+		if(email == ''){
+			console.log('123');
+			$('input[name="email"]').focus();
+			$('#email_error_msg').removeClass('hidden');
+			setTimeout(function(){
+				$('#email_error_msg').addClass('hidden');
+			},5000);
+			return false;
+		}
+		
+		//国籍验证
+		if(Nationality == ''){
+			console.log('123');
+			$('input[name="Nationality"]').focus();
+			$('#nation_error_msg').removeClass('hidden');
+			setTimeout(function(){
+				$('#nation_error_msg').addClass('hidden');
+			},5000);
+			return false;
+		}
+		
+	});
 });
 </script>

css/inquiry-form-mobile.css

@@ -227,7 +227,7 @@ input[type=checkbox]:checked+label{color: #000}
 .formMemo{font-size: 14px;color: #999;margin-left:15px;    display: block; }
 .peopleSelect .formMemo{margin-bottom: 5px;}
 .inquiryBtn{display:block;padding:20px 0 0;text-align:center;font-family:Georgia,"Times New Roman",Times,serif;font-size:24px}
-input[type=submit]{background: linear-gradient(#ca3c3b,#ad1818);
+button{background: linear-gradient(#ca3c3b,#ad1818);
   text-align: center;
   display: table;
   border-radius: 60px;