project submit

public/javascripts/project.js

@@ -5,52 +5,72 @@
  */
 (function () {
     var $form = $('#container .introducer');
+    var $submit = $('input[type="submit"]', $form);
     var $introducerMobile = $('#introducerMobile', $form);
     var $projectDescription = $('#projectDescription', $form);
     var $errorPhone = $('.error-phone', $form);
     var $errorDescription = $('.error-description', $form);
+    var $successDialog = $('.modal-box-success');
 
     var filterMobileInput = function filterMobileInput($mobile) {
         $mobile.val(($mobile.val() + '').replace(/[^\d]/g, ''));
     };
 
-    var validateMobile = function validateMobile(mobile) {
-        return (/^[\d]{11}$/g.test(mobile)
-        );
+    var validateMobile = function validateMobile() {
+        var mobile = $.trim($introducerMobile.val() + '');
+        if (/^[\d]{11}$/g.test(mobile)) {
+            $errorPhone.empty();
+            return mobile;
+        } else {
+            $errorPhone.html('手机号输入错误!');
+            return false;
+        }
     };
 
-    var validateRequire = function validateRequire(value) {
-        return value.length;
+    var validateDescription = function validateDescription() {
+        var description = $.trim($projectDescription.val() + '');
+        if (description.length) {
+            $errorDescription.empty();
+            return description;
+        } else {
+            $errorDescription.html('请输入项目描述内容!');
+            return false;
+        }
     };
 
     $introducerMobile.on('keyup', function (e) {
         filterMobileInput($introducerMobile);
     }).on('change blur', function (e) {
-        validateMobile($.trim($introducerMobile.val() + '')) ? $errorPhone.empty() : $errorPhone.html('手机号输入错误!');
+        validateMobile();
+    }).on('focus', function (e) {
+        $errorPhone.empty();
     });
 
     $projectDescription.on('change blur', function (e) {
-        validateRequire($.trim($projectDescription.val() + '')) ? $errorDescription.empty() : $errorDescription.html('请输入项目描述内容!');
+        validateDescription();
+    }).on('focus', function (e) {
+        $errorDescription.empty();
+    });
+
+    $successDialog.on('click', 'modal-dialog-close', function (e) {
+        $successDialog.fadeOut(300);
     });
 
     $form.on('submit', function (e) {
-        var mobile = $.trim($introducerMobile.val() + '');
-        var desc = $.trim($projectDescription.val() + '');
-        if (validateMobile(mobile)) {
-            $errorPhone.empty();
-        } else {
-            $errorPhone.html('手机号输入错误!');
-            return;
-        }
-        if (validateRequire(desc)) {
-            $errorDescription.empty();
-        } else {
-            $errorDescription.html('请输入项目描述内容!');
-            return;
-        }
-        request('', {}, 'POST').then(function (result) {
-            console.log(result);
+        e.preventDefault();
+        var mobile = validateMobile();
+        var description = validateDescription();
+        if (mobile && description) {
+            request('/api/1.0/proj/add.json', {
+                mobile: mobile,
+                description: description
+            }, 'POST').then(function () {
+                $successDialog.fadeIn(300);
+                alert('提交成功!');
+            }).catch(function () {
+                alert('提交失败, 请稍后再试!');
             });
+        }
     });
 })();
 

public/javascripts/project.jsx

 /**
  * Created by Administrator on 2016/7/27.
  */
-(()=>{
+(()=> {
     const $form = $('#container .introducer');
+    const $submit = $('input[type="submit"]', $form);
     const $introducerMobile = $('#introducerMobile', $form);
     const $projectDescription = $('#projectDescription', $form);
     const $errorPhone = $('.error-phone', $form);
     const $errorDescription = $('.error-description', $form);
+    const $successDialog = $('.modal-box-success');
 
-    const filterMobileInput = ($mobile)=>{
-        $mobile.val(($mobile.val()+'').replace(/[^\d]/g, ''));
+    const filterMobileInput = ($mobile)=> {
+        $mobile.val(($mobile.val() + '').replace(/[^\d]/g, ''));
     };
 
-    const validateMobile = (mobile)=>{
-        return /^[\d]{11}$/g.test(mobile);
+    const validateMobile = ()=> {
+        let mobile = $.trim($introducerMobile.val() + '');
+        if (/^[\d]{11}$/g.test(mobile)) {
+            $errorPhone.empty();
+            return mobile;
+        } else {
+            $errorPhone.html('手机号输入错误!');
+            return false;
+        }
     };
 
-    const validateRequire = (value)=>{
-        return value.length;
+    const validateDescription = ()=> {
+        let description = $.trim($projectDescription.val() + '');
+        if (description.length) {
+            $errorDescription.empty();
+            return description;
+        } else {
+            $errorDescription.html('请输入项目描述内容!');
+            return false;
+        }
     };
 
-    $introducerMobile.on('keyup', (e)=>{
+    $introducerMobile.on('keyup', (e)=> {
         filterMobileInput($introducerMobile);
-    }).on('change blur', (e)=>{
-        validateMobile($.trim($introducerMobile.val()+'')) ?
-            $errorPhone.empty() :
-            $errorPhone.html('手机号输入错误!');
+    }).on('change blur', (e)=> {
+        validateMobile();
+    }).on('focus', (e)=> {
+        $errorPhone.empty();
     });
 
-    $projectDescription.on('change blur', (e)=>{
-        validateRequire($.trim($projectDescription.val()+'')) ?
-            $errorDescription.empty() :
-            $errorDescription.html('请输入项目描述内容!');
+    $projectDescription.on('change blur', (e)=> {
+        validateDescription();
+    }).on('focus', (e)=> {
+        $errorDescription.empty();
     });
 
-    $form.on('submit', (e)=>{
-        let mobile = $.trim($introducerMobile.val()+'');
-        let desc = $.trim($projectDescription.val()+'');
-        if(validateMobile(mobile)){
-            $errorPhone.empty()
-        }else{
-            $errorPhone.html('手机号输入错误!');
-            return;
-        }
-        if(validateRequire(desc)){
-            $errorDescription.empty()
-        }else {
-            $errorDescription.html('请输入项目描述内容!');
-            return;
-        }
-        request('', {}, 'POST').then((result)=>{
-            console.log(result);
+
+    $successDialog.on('click', 'modal-dialog-close', (e)=> {
+        $successDialog.fadeOut(300);
     });
+
+    $form.on('submit', (e)=> {
+        e.preventDefault();
+        let mobile = validateMobile();
+        let description = validateDescription();
+        if (mobile && description) {
+            request('/api/1.0/proj/add.json', {
+                mobile,
+                description
+            }, 'POST').then(()=> {
+                $successDialog.fadeIn(300);
+                alert('提交成功!');
+            }).catch(()=> {
+                alert('提交失败, 请稍后再试!');
+            });
+        }
     });
 })();
 
-(()=>{
+(()=> {
     const $modalBox = $('.modal-box');
 
-    $('.hot-project-address').on('click','a',(e)=>{
+    $('.hot-project-address').on('click', 'a', (e)=> {
         e.preventDefault();
         $modalBox.fadeIn(300);
     });
 
-    $modalBox.on('click', '.modal-dialog-close', (e)=>{
+    $modalBox.on('click', '.modal-dialog-close', (e)=> {
         e.preventDefault();
         $modalBox.fadeOut(300);
     });
 
 
-
 })();
 
 
-
-
-
-
 // (function () {
 //
 //

public/javascripts/project.min.js

-"use strict";(function(){var $form=$("#container .introducer");var $introducerMobile=$("#introducerMobile",$form);var $projectDescription=$("#projectDescription",$form);var $errorPhone=$(".error-phone",$form);var $errorDescription=$(".error-description",$form);var filterMobileInput=function filterMobileInput($mobile){$mobile.val(($mobile.val()+"").replace(/[^\d]/g,""))};var validateMobile=function validateMobile(mobile){return/^[\d]{11}$/g.test(mobile)};var validateRequire=function validateRequire(value){return value.length};$introducerMobile.on("keyup",function(e){filterMobileInput($introducerMobile)}).on("change blur",function(e){validateMobile($.trim($introducerMobile.val()+""))?$errorPhone.empty():$errorPhone.html("手机号输入错误!")});$projectDescription.on("change blur",function(e){validateRequire($.trim($projectDescription.val()+""))?$errorDescription.empty():$errorDescription.html("请输入项目描述内容!")});$form.on("submit",function(e){var mobile=$.trim($introducerMobile.val()+"");var desc=$.trim($projectDescription.val()+"");if(validateMobile(mobile)){$errorPhone.empty()}else{$errorPhone.html("手机号输入错误!");return}if(validateRequire(desc)){$errorDescription.empty()}else{$errorDescription.html("请输入项目描述内容!");return}request("",{},"POST").then(function(result){console.log(result)})})})();(function(){var $modalBoxProject=$(".modal-box-project");var $modalBoxSuccess=$(".modal-box-success");$(".hot-project-address a").click(function(e){e.preventDefault();$modalBox.fadeIn(300)});$("#modalBoxHidden").click(function(e){e.preventDefault();$modalBox.fadeOut(300)});$submit.on("click",function(e){e.preventDefault();$modalBoxSuccess.fadeIn(300)});$(".modal-box-success a").on("click",function(e){e.preventDefault();$modalBoxSuccess.fadeOut(300)})})();
+"use strict";(function(){var $form=$("#container .introducer");var $submit=$('input[type="submit"]',$form);var $introducerMobile=$("#introducerMobile",$form);var $projectDescription=$("#projectDescription",$form);var $errorPhone=$(".error-phone",$form);var $errorDescription=$(".error-description",$form);var $successDialog=$(".modal-box-success");var filterMobileInput=function filterMobileInput($mobile){$mobile.val(($mobile.val()+"").replace(/[^\d]/g,""))};var validateMobile=function validateMobile(){var mobile=$.trim($introducerMobile.val()+"");if(/^[\d]{11}$/g.test(mobile)){$errorPhone.empty();return mobile}else{$errorPhone.html("手机号输入错误!");return false}};var validateDescription=function validateDescription(){var description=$.trim($projectDescription.val()+"");if(description.length){$errorDescription.empty();return description}else{$errorDescription.html("请输入项目描述内容!");return false}};$introducerMobile.on("keyup",function(e){filterMobileInput($introducerMobile)}).on("change blur",function(e){validateMobile()}).on("focus",function(e){$errorPhone.empty()});$projectDescription.on("change blur",function(e){validateDescription()}).on("focus",function(e){$errorDescription.empty()});$successDialog.on("click","modal-dialog-close",function(e){$successDialog.fadeOut(300)});$form.on("submit",function(e){e.preventDefault();var mobile=validateMobile();var description=validateDescription();if(mobile&&description){request("/api/1.0/proj/add.json",{mobile:mobile,description:description},"POST").then(function(){$successDialog.fadeIn(300);alert("提交成功!")}).catch(function(){alert("提交失败, 请稍后再试!")})}})})();(function(){var $modalBox=$(".modal-box");$(".hot-project-address").on("click","a",function(e){e.preventDefault();$modalBox.fadeIn(300)});$modalBox.on("click",".modal-dialog-close",function(e){e.preventDefault();$modalBox.fadeOut(300)})})();
\ No newline at end of file

public/stylesheets/project.css

@@ -118,7 +118,7 @@
   border: none;
   font-size: 24px;
   color: #fff;
-  background: #868686;
+  background: #ff4a4b;
   border-radius: 10px;
   text-align: center;
 }

public/stylesheets/project.less

@@ -192,7 +192,7 @@
       border: none;
       font-size: 24px;
       color: #fff;
-      background: #868686;
+      background: #ff4a4b;
       border-radius: 10px;
       text-align: center;
     }

public/stylesheets/style.css

@@ -436,6 +436,16 @@ a {
   content: '';
   display: table;
 }
+input:active,
+textarea:active,
+select:active,
+a:active,
+input:focus,
+textarea:focus,
+select:focus,
+a:focus {
+  outline: none;
+}
 hr.line-separate {
   position: relative;
   width: 80%;

public/stylesheets/style.less

@@ -35,6 +35,13 @@ a {
   }
 }
 
+input, textarea, select, a {
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
 hr.line-separate {
   position: relative;
   width: 80%;
@@ -67,7 +74,7 @@ hr.line-separate {
     z-index: 999;
   }
   nav {
-    padding-left:@container-width / 4;
+    padding-left: @container-width / 4;
     font-size: 16px;
     span {
       float: left;
@@ -149,7 +156,6 @@ hr.line-separate {
   }
 }
 
-
 /*.banner end*/
 
 .screen() {
@@ -180,6 +186,6 @@ hr.line-separate {
   }
 }
 
-body{
+body {
   .screen();
 }
\ No newline at end of file

views/project.hbs

@@ -40,7 +40,7 @@
                       placeholder="详细写明您的项目需求  例如：项目时间、内容、合作意向。"></textarea>
             <p class="error-description"></p>
         </div>
-        <div><input type="submit" value="立即提交" disabled id="submit"/></div>
+        <div><input type="submit" value="立即提交"/></div>
     </form>
 </div>
 <div class="hot-project-address">