expo-6 page: /expo/fiera-natale-2014/service/translator/ -ready

templates/client/blank.html

@@ -57,7 +57,12 @@ This template include basic anf main styles and js files,
             removeCalendarClass:"removecalendar",
             addCalendarText:"{% trans 'добавить в календарь' %}",
             removeCalendarText:"{% trans 'Убрать из календаря' %}",
-            loginModalId:'pw-login'
+            loginModalId:'pw-login',
+            staticValidation:{
+                errorClass:'error-field',
+                blobClass:'error-blob',
+                containerClass:'validate-field'
+            }
         });
     </script>
 	</head>

templates/client/service/translator.html

@@ -48,7 +48,7 @@
 
         </div>
 
-        <div class="rq-form" {% if form.errors %}style="display:block"{% endif %}>
+        <div class="rq-form service-page" {% if form.errors %}style="display:block"{% endif %}>
             <form action="#" method="post">{% csrf_token %}
 
                 <hr />
@@ -135,50 +135,48 @@
                     <div class="rqf-title">{% trans 'Ваши контактные данные' %}</div>
 
                     <div class="mf-line rq-person">
-                        <div class="mf-field">
+                        <div class="mf-field validate-field{% if form.person_inf.errors %} error-field{% endif %}">
                             {{ form.person_inf }}
-                        </div>
-                    </div>
-                    <div class="mf-line rq-person">
-                        <div class="mf-field error">
-                            {{ form.person_inf.errors }}
+                            <div class="error-blob">
+                                {{ form.person_inf.errors }}
+
+                            </div>
                         </div>
                     </div>
 
                     <div class="mf-line cols-2 rq-place">
-                        <div class="mf-field rq-country">
+                        <div class="mf-field validate-field rq-country{% if form.country.errors %} error-field{% endif %}">
                             {{ form.country }}
+                            <div class="error-blob">
+                                {{ form.country.errors }}
+
+                            </div>
                         </div>
 
-                        <div class="mf-field rq-city">
+                        <div class="mf-field validate-field rq-city{% if form.city.errors %} error-field{% endif %}">
                             {{ form.city }}
+                            <div class="error-blob">
+                                {{ form.city.errors }}
+
+                            </div>
                         </div>
                     </div>
-                    <div class="mf-line cols-2 rq-place">
-                        <div class="mf-field rq-country error">
-                            {{ form.country.errors }}
-                        </div>
-                        <div class="mf-field rq-city error">
-                            {{ form.city.errors }}
-                        </div>
-                    </div>
-
 
                     <div class="mf-line cols-2 rq-contacts">
-                        <div class="mf-field rq-tel">
+                        <div class="mf-field validate-field rq-tel{% if form.phone.errors %} error-field{% endif %}">
                             {{ form.phone }}
+                            <div class="error-blob">
+                                {{ form.phone.errors }}
+
+                            </div>
                         </div>
 
-                        <div class="mf-field rq-mail">
+                        <div class="mf-field validate-field rq-mail{% if form.person.errors %} error-field{% endif %}">
                             {{ form.person }}
-                        </div>
-                    </div>
-                    <div class="mf-line cols-2 rq-contacts">
-                        <div class="mf-field rq-tel error">
-                            {{ form.phone.errors }}
-                        </div>
-                        <div class="mf-field rq-mail error">
-                            {{ form.person.errors }}
+                            <div class="error-blob">
+                                {{ form.person.errors }}
+
+                            </div>
                         </div>
                     </div>
 

templates/client/static_client/css/main.css

@@ -3249,6 +3249,7 @@ textarea,
 	/*line-height: 40px;*/
 	border-radius: 3px;
 	box-shadow: inset 0 2px 2px -2px #aaa;
+	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
@@ -3262,8 +3263,8 @@ html[data-useragent*='Trident/7.0'] textarea {
 input[type="text"]:focus,
 input[type="password"]:focus,
 textarea:focus {
-	padding: 0 19px;
 	border: 2px solid #ff6600;
+	padding:0 5px;
 }
 
 textarea {
@@ -3545,10 +3546,6 @@ label.check input {
 	line-height: 25px;
 }
 
-/*.custom-select select:hover + .custom-select-wrap {
-	border-color: #58d357;
-}*/
-
 .custom-select select:focus + .custom-select-wrap {
 	border: 2px solid #ff6600;
 	padding: 0 29px 0 19px;
@@ -7826,7 +7823,7 @@ a.order-button:hover .ob-text,
 
 .mf-line.cols-2 .mf-field:first-child,
 .mf-line.cols-2 > label:first-child {
-	padding: 0 10px 0 0;
+	padding: 0 10px 5px 0;
 }
 
 .mf-line.full-width .mf-field {
@@ -7842,11 +7839,6 @@ a.order-button:hover .ob-text,
 	display: block;
 }
 
-/*.mf-line .mf-field textarea {
-	padding: 5px;
-}
-*/
-
 .mf-line.full-width > label {
 	display: block;
 	margin-bottom: 5px;
@@ -12465,4 +12457,83 @@ hr + .rq-note {
 		background: url('../img/sprites.png') no-repeat -251px -134px;
 		margin-right: 10px;
 	}
-	
+
+/************************\
+# ошибки ввода на страницах услуг expo-6
+\***********************/
+
+	.service-page .error-field{
+		position: relative;
+		/*padding:0 5px;*/
+
+	}
+	.service-page .error-field:before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 50%;
+		right: 0;
+		margin-right: 32px;
+		margin-top: -11px;
+		width: 15px;
+		height: 16px;
+		background: transparent url(../img/sprites.png) -360px -159px;
+	}
+		.service-page .error-field input{
+			border-color: #d80000;
+		}
+
+		.service-page .error-blob{
+			border-width: 2px;
+			border-color: #d80000;
+			background: #696969;
+			text-align: center;
+			color: #ffffff;
+			position: absolute;
+			padding: 8px 16px;
+			top: 0;
+			left: 50%;
+			margin-top: -41px;
+			width: 160px;
+			margin-left: -100px;
+			border-radius: 4px;
+			display: none;
+			font-size: 14px;
+			-webkit-transition: all .3s;
+			-o-transition: all .3s;
+			transition: all .3s;
+
+		}
+		.service-page .error-field:hover .error-blob{
+			display: block;
+		}
+		.error-blob:after, .error-blob:before {
+			top: 100%;
+			left: 50%;
+			border: solid transparent;
+			content: " ";
+			height: 0;
+			width: 0;
+			position: absolute;
+			pointer-events: none;
+		}
+
+		.error-blob:after {
+			border-color: rgba(0, 0, 0, 0);
+			border-top-color: #696969;
+			border-width: 3px;
+			margin-left: -3px;
+		}
+		.error-blob:before {
+			border-color: rgba(0, 0, 0, 0);
+			border-top-color: #696969;
+			border-width: 9px;
+			margin-left: -9px;
+		}
+			.service-page .error-blob ul{
+				margin: 0;
+				padding: 0;
+				display: block;
+				list-style-type: none;
+			}
+

templates/client/static_client/js/_modules/block.common.js

@@ -183,9 +183,14 @@ if (EXPO.common){
 				addClass = this.opt.addCalendarClass,
 				remClass = this.opt.removeCalendarClass,
 				addText = this.opt.addCalendarText,
-				remText = this.opt.removeCalendarText;
+				remText = this.opt.removeCalendarText,
+				validErrorClass = self.opt.staticValidation.errorClass,
+				validContainerClass = self.opt.staticValidation.containerClass,
+				$staticFields,
+				blobClass =  self.opt.staticValidation.blobClass;
 
 			$(function () {
+				$staticFields = $('.'+validErrorClass);
 				$('.'+addClass+', .'+remClass).on('click', function(event){
 					addText = self.opt.addCalendarText;
 					remText = self.opt.removeCalendarText;
@@ -210,6 +215,18 @@ if (EXPO.common){
 					});
 
 				});
+				/**
+				 * static validation (non Ajax) on form fields
+				 */
+				if($staticFields.length){
+					$staticFields.find('input:text').on('keyup', function () {
+						if($.trim($(this).val()) != ''){
+							$(this).closest('.'+validErrorClass).removeClass(validErrorClass);
+						}else{
+							$(this).closest('.'+validContainerClass).addClass(validErrorClass);
+						}
+					})
+				}
 			});