add validation and terms

step_question/apis/static/index2.html

@@ -19,7 +19,7 @@
         <img src="https://hhh.com.tw/assets/images/hhh-logo2.svg" width="145" height="40" alt="hhh-logo" class="img_logo">
         <span class="sub-logo mb-0">裝修市調</span>
       </div>
-      <span class="slogan">送五萬元裝潢折抵券</span>
+      <span class="slogan">送五萬元裝潢折抵券＋咖啡折價券</span>
     </div>
   </nav>
   <!-- <div class="top">
@@ -48,7 +48,7 @@
     </select>
     <input type="text" name='q2' value="" placeholder="手機號碼" /> <br/>
     <input type="email" name='q3' value="" placeholder="Email" />
-    <input type="button" name="next" class="next action-button" value="下一步" />
+    <input id="checker" type="button" name="next" class="next action-button" value="下一步" />
   </fieldset>
   <fieldset>
     <h2 class="fs-title">建案資料</h2>
@@ -119,6 +119,13 @@
         <label class="mr fs-label-info" for="8e">50坪以上</label>
       </div>
       <br/>
+      <!-- <div class="terms">
+
+      </div> -->
+      <input id="checker2" type="checkbox" class="custom-control-input" value="" name="q9" checked>
+      <label for="checker2" style="margin-bottom: .5rem;">我同意</label>
+      <br>
+      <p id="term-error"></p>
       <input type="button" name="previous" class="previous action-button" value="上一步" />
       <input type="submit" name="submit" class="submit action-button" value="提交" />
   </fieldset>

step_question/apis/static/index_complete.html

@@ -26,7 +26,7 @@
         <div class="thankyou">
             <h3>再次感謝您的協助填寫</h3>
             <img src="images/checked.png" alt="" class="mb-2">
-            <p>咖啡兌換卷已經寄到您的email 信箱，請至您的信箱查看。</p>
+            <p>５萬裝潢折抵券已經寄到您的email 信箱，請至您的信箱查看。</p>
             <button class="btn-exit">離開</button>
         </div>
         </div>

step_question/apis/static/script.js

@@ -81,19 +81,33 @@ $(".previous").click(function(){
 });
 
 
-/*$("input[name=submit]").click(function(){
-   console.log($("#msform").serialize());
-  $.ajax({
-    url: '/step_questions/submit',
-    type: 'post',
-    dataType: 'json',
-    data: $("#msform").serialize(),
-    success: function(data) {
-      showThankyou();
-      }
-  }); 
-	return false; 
-})*/
+$("input[name=submit]").click(function(){
+	let stop;
+	   console.log($("#msform").serialize());
+	   
+   	if( $('input[name="q9"]:visible').val() !== undefined && !$('input[name="q9"]:visible').prop('checked') ) {
+		stop = 1;
+		$('#term-error').text('必須同意免責聲明與隱私使用政策');
+	}else {
+		stop = 0;
+		$('#term-error').text('');
+	}
+
+	if(stop == 0) {
+		/* $.ajax({
+			url: '/step_questions/submit',
+			type: 'post',
+			dataType: 'json',
+			data: $("#msform").serialize(),
+			success: function(data) {
+			  showThankyou();
+			},
+			error: function (error) {
+				console.error(error)
+			}
+		}); */
+	}
+});
 
 function showThankyou() {
 	document.location = 'index_complete.html';
@@ -134,12 +148,18 @@ function validate() {
   }
 
   function q3_validate() {
+	  let emailPattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     if( $('input[name="q3"]:visible').val() !== undefined && $('input[name="q3"]:visible').val().length <= 0) {
       $('input[name="q3"]:visible').addClass('error');
       if( !$('.error-text').length )
           $('input.error').after('<p class="error-text">請輸入E-mail</p>');
       return false;
-    }
+    } else if ( $('input[name="q3"]:visible').val() !== undefined && !emailPattern.test($('input[name="q3"]:visible').val()) ){
+		$('input[name="q3"]:visible').addClass('error');
+      	if( !$('.error-text').length )
+          $('input.error').after('<p class="error-text">請輸入正確email格式</p>');
+      	return false;
+	}
     else {
         $('input[name="q3"]:visible').removeClass('error');
         $('.error-text').remove();
@@ -147,5 +167,19 @@ function validate() {
     }
   }
 
-  return q2_validate() && q3_validate()
+  function q4_validate() {
+	  if( $('input[name="q4"]:visible').val() !== undefined && $('input[name="q4"]:visible').val().length <= 0 ) {
+		$('input[name="q4"]:visible').addClass('error');
+		if( !$('.error-text').length )
+			$('input.error').after('<p class="error-text">請輸入建案名稱</p>');
+		return false;
+	  } 
+	  else {
+		$('input[name="q4"]:visible').removeClass('error');
+        $('.error-text').remove();
+        return true;
+	  }
+  }
+
+  return q2_validate() && q3_validate() && q4_validate();
 }

step_question/apis/static/style.css

@@ -133,7 +133,8 @@ body {
 	border-radius: 1px;
 	cursor: pointer;
 	padding: 10px 5px;
-	margin: 10px 5px;
+	margin: 10px auto;
+	display: inline-block;
 }
 #msform .action-button:hover, #msform .action-button:focus {
 	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
@@ -220,6 +221,13 @@ p.error-text {
 	font-size: .8em;
 }
 
+#term-error {
+	color: rgba(255, 0, 0, .7);
+	font-size: .8em;
+	bottom: -23px;
+	left: 24px;
+}
+
 select {
 	padding: 15px;
 	border: 1px solid #ccc;
@@ -234,6 +242,17 @@ select {
 	background-color: transparent;
 }
 
+.terms {
+	width: 80%;
+	min-width: 250px;
+	height: 90px;
+	overflow: scroll;
+	margin-bottom: 1rem;
+	margin-left: auto;
+	margin-right: auto;
+	border: 1px solid rgb(163, 163, 163);
+}
+
 .left_align {
 	font-size: 18px;
 	text-align: left;
@@ -300,6 +319,10 @@ input[type="checkbox"] {
 	display: none;
 }
 
+#checker1, #checker2 {
+	display: inline;
+}
+
 .fs-label-info {
 	background: transparent;
 	padding: 5px;