Commit @d37c4bbac556628cd946a612c014be75394561de

Jihan Kim 2014-06-12

Project: improve validations for new project form

@d37c4bbac556628cd946a612c014be75394561de

b7b75e8

d37c4bb

app/assets/stylesheets/less/_page.less

--- app/assets/stylesheets/less/_page.less

+++ app/assets/stylesheets/less/_page.less


 //-- new project
 .form-wrap {
     &.new-project {
+        position:relative;
         width:700px;
         margin: 30px auto;
 

             background:#fafafa;
             .border-radius(10px);
         }
+
+        .popover {
+            max-width:144px;
+        }
     }
 }
 

b7b75e8

d37c4bb

app/assets/stylesheets/less/_yobiUI.less

--- app/assets/stylesheets/less/_yobiUI.less

+++ app/assets/stylesheets/less/_yobiUI.less


     .border-radius(2px);
     .box-shadow(-2px 2px 1px rgba(0,0,0,0.1));
 }
+.popover-content {
+    padding:9px 10px;
+    line-height:120%;
+}
 
 /** yobi.ui.Dropdown **/
 .dropdown-toggle {

b7b75e8

d37c4bb

app/views/project/create.scala.html

--- app/views/project/create.scala.html

+++ app/views/project/create.scala.html


 <div class="page-wrap-outer">
   <div class="project-page-wrap">
     <div class="form-wrap new-project">
-      <form action="@routes.ProjectApp.newProject()" method="post" name="newproject" class="frm-wrap">
+      <form id="newProjectForm" action="@routes.ProjectApp.newProject()" method="post" class="frm-wrap">
         <legend>
           @Messages("title.newProject")
           <span>

                     </option>
                 }
             </select>
-            <div class="n-alert" data-errType="owner">
-              <div class="orange-txt">
-                @if(newProjectForm.error("owner") != null) { <span class="warning">@Messages(newProjectForm.error("owner").message())</span> }
-              </div>
-            </div>
+            @if(newProjectForm.error("owner") != null) {
+              <span class="orange-text">@Messages(newProjectForm.error("owner").message())</span>
+            }
           </dd>
           <!-- // -->
 

           </dt>
           <dd>
             <input id="project-name" type="text" name="name" class="text" maxlength="250" pattern="[a-zA-Z0-9-]+"
-                   value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.alert")"  >
-            <div class="n-alert" data-errType="name">
-              <div class="orange-txt">
-                @if(newProjectForm.error("name") != null) { <span class="warning">@Messages(newProjectForm.error("name").message())</span> }
-                <span class="msg wrongName" style="display: none;"></span>
-              </div>
-            </div>
+                   value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.placeholder")"  >
           </dd>
           <!-- // -->
 

 
 @common.select2()
 <script type="text/javascript">
-    $(document).ready(function() {
+    $(function() {
         $yobi.loadModule("project.New", {
-            "sFormName" : "newproject"
+            "sFormId": "#newProjectForm",
+            "htError": @Html(newProjectForm.errorsAsJson.toString)
         });
     });
 </script>

b7b75e8

d37c4bb

app/views/project/importing.scala.html

--- app/views/project/importing.scala.html

+++ app/views/project/importing.scala.html


 <div class="page-wrap-outer">
   <div class="project-page-wrap">
     <div class="form-wrap new-project">
-      <form id="importGit" action="@routes.ImportApp.newProject()" method="post" name="newproject" class="frm-wrap">
+      <form id="importGit" action="@routes.ImportApp.newProject()" method="post" class="frm-wrap">
         <legend>
           @Messages("project.import.from.git")
             <span>

           </dt>
           <dd>
             <input id="url" type="text" name="url" class="text" placeholder="@Messages("project.git.url.alert")" value="@newProjectForm.field("url").value">
-            <div class="n-alert" data-errType="url">
-              <div class="orange-txt">
-                @if(newProjectForm.error("url") != null) { <span class="warning">@Messages(newProjectForm.error("url").message())</span> }
-              </div>
-            </div>
           </dd>
           <!-- // -->
           <!-- ProjectOwner -->

               </option>
               }
             </select>
-            <div class="n-alert" data-errType="owner">
-              <div class="orange-txt">
-                @if(newProjectForm.error("owner") != null) { <span class="warning">@Messages(newProjectForm.error("owner").message())</span> }
-              </div>
-            </div>
+            @if(newProjectForm.error("owner") != null) {
+              <span class="orange-text">@Messages(newProjectForm.error("owner").message())</span>
+            }
           </dd>
           <!-- // -->
 

           <dd>
             <input id="project-name" type="text" name="name" class="text" maxlength="250" pattern="[a-zA-Z0-9-]+"
                    value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.alert")"  >
-            <div class="n-alert" data-errType="name">
-              <div class="orange-txt">
-                @if(newProjectForm.error("name") != null) { <span class="warning">@Messages(newProjectForm.error("name").message())</span> }
-                <span class="msg wrongName" style="display: none;"></span>
-              </div>
-            </div>
           </dd>
           <!-- // -->
 

 
 @common.select2()
 <script type="text/javascript">
-  $(document).ready(function(){
+  $(function() {
       $yobi.loadModule("project.New", {
-          "sFormName": "newproject"
+          "sFormId": "#importGit",
+          "htError": @Html(newProjectForm.errorsAsJson.toString)
       });
   });
 </script>

b7b75e8

d37c4bb

conf/messages

--- conf/messages

+++ conf/messages


 project.members = Project members
 project.members.addMember = Add new member ID.
 project.name = Project name
-project.name.alert = Characters that can be used in URL are allowed
+project.name.alert = Enter name in alphabet, number or hyphen
 project.name.duplicate = Same project name already exists.
-project.name.placeholder = Enter project name
+project.name.placeholder = Enter project name in alphabet, number or hyphen
 project.name.reserved.alert = You can''t use reserved names.
 project.name.rule = Naming rules
 project.new.agreement = I have read this user agreement and agree to all of its provisions.

b7b75e8

d37c4bb

conf/messages.ja

--- conf/messages.ja

+++ conf/messages.ja


 project.members = メンバー
 project.members.addMember = 追加するメンバーのIDを入力してください
 project.name = プロジェクト名
-project.name.alert = プロジェクト名はURLで使える文字(半角ローマ字,数字,-'ハイフン')だけ使えます
+project.name.alert = 半角英数字,ハイフン(-)だけにしてください
 project.name.duplicate = すでに同じな名前のプロジェクトがあります
-project.name.placeholder = プロジェクト名を入力してください
-project.name.reserved.alert = Name is reserved
+project.name.placeholder = プロジェクト名には半角英数字,ハイフン(-)のみ使用できます
+project.name.reserved.alert = 予約語は使用できません
 project.name.rule = 名前規則
 project.new.agreement = 利用契約に同意する
 project.new.vcsType.git = Git

 project.onwatching = <strong>{0}</strong>
 project.owner = 作成者名
 project.private = 非公開
-project.private.notice = 非公開プロジェクトもプロジェクト名、説明、ロゴなどは誰にでも見えます。
+project.private.notice = プロジェクトメンバーだけに接近を許します。ただし、プロジェクト名、説明、ロゴなどは一般に公開されます
 project.projects = プロジェクト
+project.protected = グループ内公開
+project.protected.notice = 同じグループ内の人々とプロジェクトメンバーだけに接近を許します
 project.public = 公開
+project.public.notice =　誰もこのプロジェクトに接近できます
 project.readme = プロジェクトに関する説明をREADME.mdファイルで作成してリポジトリールートに追加したらここに表示されます
 project.searchPlaceholder = このプロジェクトで検索
 project.setting = 設定

b7b75e8

d37c4bb

conf/messages.ko

--- conf/messages.ko

+++ conf/messages.ko


 project.members = 프로젝트 멤버
 project.members.addMember = 새로운 멤버의 아이디를 입력하세요
 project.name = 프로젝트 이름
-project.name.alert = 프로젝트 이름은 URL로 사용할 수 있는 글자(영문자,숫자,-'하이픈')만 허용합니다
+project.name.alert = 영문, 숫자, 하이픈(-)만 입력해주세요
 project.name.duplicate = 이미 같은 이름의 프로젝트가 있습니다
-project.name.placeholder = 프로젝트 이름을 입력해주세요.
-project.name.reserved.alert = 예약된 이름으로 사용할 수 없습니다.
+project.name.placeholder = 프로젝트 이름은 영문, 숫자, 하이픈(-)만 사용할 수 있습니다
+project.name.reserved.alert = 예약된 이름으로 사용할 수 없습니다
 project.name.rule = 이름 규칙
 project.new.agreement = 본인은 약관에 대한 안내를 읽었으며 이에 동의합니다
 project.new.vcsType.git = Git

b7b75e8

d37c4bb

public/javascripts/service/yobi.project.New.js

--- public/javascripts/service/yobi.project.New.js

+++ public/javascripts/service/yobi.project.New.js


         var htElement = {};
 
         function _init(htOptions){
-            _initVar(htOptions);
-            _initElement();
+            _initVar();
+            _initElement(htOptions);
             _attachEvent();
+            _focusOnFirstField();
 
-            _initFormValidator();
-
-            htElement.welInputProjectName.focus();
+            _showErrors(htOptions.htError);
         }
 
         /**
          * initialize variables
          */
-        function _initVar(htOptions){
-            htVar.sFormName = htOptions.sFormName || "newproject";
+        function _initVar(){
             htVar.rxPrjName = /^[0-9A-Za-z-_\.]+$/;
             htVar.aReservedWords = [".", "..", ".git"];
         }

         /**
          * initialize element
          */
-        function _initElement(){
-            htElement.vcsSelect = $("#vcs");
-            htElement.svnWarning = $("#svn");
+        function _initElement(htOptions){
+            htElement.welForm = $(htOptions.sFormId);
             htElement.welInputProjectName = $("#project-name");
             htElement.welInputProjectOwner = $("#project-owner");
+            htElement.welInputGitRepoURL = $("#url");
+
+            htElement.vcsSelect = $("#vcs");
+            htElement.svnWarning = $("#svn");
             htElement.welProtected = $("#opt-protected");
         }
 

         function _attachEvent(){
             htElement.vcsSelect.on("change", _onChangeVCSItem);
             htElement.welInputProjectOwner.on("change", _onChangeProjectOwner);
+            htElement.welForm.on("submit", _validateForm);
         }
 
         function _onChangeVCSItem(evt){

 
         function _onChangeProjectOwner() {
             var sType = $("#project-owner option:selected").data("type");
+
             if (sType == "user") {
                 if ($("#protected").is(":checked")) {
                     $("#public").prop("checked", true);

             }
         }
 
-        /**
-         * initialize formValidator
-         * @require validate.js
-         */
-        function _initFormValidator(){
-            // name : name of input element
-            // rules: rules to apply to the input element.
-            var aRules = [];
-
-            htVar.oValidator = new FormValidator(htVar.sFormName, aRules, function(aErrors){
-                var oForm = $(document.forms[htVar.sFormName]);
-                var oElement = oForm.find("input[name=name]");
-                var sPrjName = oElement.val();
-                if(!htVar.rxPrjName.test(sPrjName)){
-                    aErrors.push({
-                        id: oElement.attr("id"),
-                        name: oElement.attr("name"),
-                        message: Messages("project.name.alert")
-                    });
-                }
-                if(htVar.aReservedWords.indexOf(sPrjName) >= 0){
-                    aErrors.push({
-                        id: oElement.attr("id"),
-                        name: oElement.attr("name"),
-                        message: Messages("project.name.reserved.alert")
-                    });
-                }
-                _onFormValidate(aErrors);
-            });
+        function _focusOnFirstField(){
+            if(htElement.welInputGitRepoURL.length > 0){
+                htElement.welInputGitRepoURL.focus();
+            } else {
+                htElement.welInputProjectName.focus();
+            }
         }
 
         /**
-         * handler for validation errors.
+         * Validate form on submit
+         *
+         * @private
          */
-        function _onFormValidate(aErrors){
-            if(aErrors.length > 0){
-                $('span.warning').hide();
-                $('span.msg').html(aErrors[0].message).show();
-            } else {
-                new Spinner({
-                    lines: 13, // The number of lines to draw
-                    length: 10, // The length of each line
-                    width: 5, // The line thickness
-                    radius: 10, // The radius of the inner circle
-                    corners: 1, // Corner roundness (0..1)
-                    rotate: 0, // The rotation offset
-                    direction: 1, // 1: clockwise, -1: counterclockwise
-                    color: '#000', // #rgb or #rrggbb
-                    speed: 1, // Rounds per second
-                    trail: 60, // Afterglow percentage
-                    shadow: false, // Whether to render a shadow
-                    hwaccel: false, // Whether to use hardware acceleration
-                    className: 'spinner', // The CSS class to assign to the spinner
-                    zIndex: 2e9, // The z-index (defaults to 2000000000)
-                    top: 'auto', // Top position relative to parent in px
-                    left: 'auto' // Left position relative to parent in px
-                }).spin(document.forms[htVar.sFormName]);
+        function _validateForm(evt){
+            var error = {};
+            var projectName = htElement.welInputProjectName.val();
+
+            if(projectName.length === 0){
+                error.name = error.name || [];
+                error.name.push(Messages("project.name.alert"));
+            }
+
+            if(!htVar.rxPrjName.test(projectName)){
+                error.name = error.name || [];
+                error.name.push(Messages("project.name.alert"));
+            }
+
+            if(htVar.aReservedWords.indexOf(projectName) > -1){
+                error.name = error.name || [];
+                error.name.push(Messages("project.name.reserved.alert"));
+            }
+
+            if(htElement.welInputGitRepoURL.length > 0 &&
+               htElement.welInputGitRepoURL.val().trim().length === 0 ){
+                error.url = error.url || [];
+                error.url.push(Messages("project.import.error.empty.url"));
+            }
+
+            if(!$.isEmptyObject(error)){
+                _showErrors(error);
+                evt.preventDefault();
+                return false;
+            }
+
+            yobi.ui.Spinner.show();
+        }
+
+        /**
+         * Show error message on target element with $.popover
+         *
+         * @param error
+         * @private
+         */
+        function _showErrors(error){
+            if(!error){
+                return;
+            }
+
+            var targetElement;
+
+            for(var target in error){
+                targetElement = htElement.welForm.find("[name=" + target + "]");
+
+                if(targetElement.length > 0) {
+                    targetElement.popover({
+                        "trigger"  : "manual",
+                        "placement": "left",
+                        "content"  : error[target].shift()
+                    }).popover("show");
+                }
             }
         }
 

Add a comment

Open 0
Closed 0

List

...	...	@@ -1405,6 +1405,7 @@
1405	1405	//-- new project
1406	1406	.form-wrap {
1407	1407	&.new-project {
	1408	+ position:relative;
1408	1409	width:700px;
1409	1410	margin: 30px auto;
1410	1411
...	...	@@ -1439,6 +1440,10 @@
1439	1440	background:#fafafa;
1440	1441	.border-radius(10px);
1441	1442	}
	1443	+
	1444	+ .popover {
	1445	+ max-width:144px;
	1446	+ }
1442	1447	}
1443	1448	}
1444	1449

...	...	@@ -28,7 +28,7 @@
28	28	<div class="page-wrap-outer">
29	29	<div class="project-page-wrap">
30	30	<div class="form-wrap new-project">
31		- <form action="@routes.ProjectApp.newProject()" method="post" name="newproject" class="frm-wrap">
	31	+ <form id="newProjectForm" action="@routes.ProjectApp.newProject()" method="post" class="frm-wrap">
32	32	<legend>
33	33	@Messages("title.newProject")
34	34	<span>
...	...	@@ -64,11 +64,9 @@
64	64	</option>
65	65	}
66	66	</select>
67		- <div class="n-alert" data-errType="owner">
68		- <div class="orange-txt">
69		- @if(newProjectForm.error("owner") != null) { <span class="warning">@Messages(newProjectForm.error("owner").message())</span> }
70		- </div>
71		- </div>
	67	+ @if(newProjectForm.error("owner") != null) {
	68	+ <span class="orange-text">@Messages(newProjectForm.error("owner").message())</span>
	69	+ }
72	70	</dd>
73	71	<!-- // -->
74	72
...	...	@@ -81,13 +79,7 @@
81	79	</dt>
82	80	<dd>
83	81	<input id="project-name" type="text" name="name" class="text" maxlength="250" pattern="[a-zA-Z0-9-]+"
84		- value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.alert")" >
85		- <div class="n-alert" data-errType="name">
86		- <div class="orange-txt">
87		- @if(newProjectForm.error("name") != null) { <span class="warning">@Messages(newProjectForm.error("name").message())</span> }
88		- <span class="msg wrongName" style="display: none;"></span>
89		- </div>
90		- </div>
	82	+ value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.placeholder")" >
91	83	</dd>
92	84	<!-- // -->
93	85
...	...	@@ -187,9 +179,10 @@
187	179
188	180	@common.select2()
189	181	<script type="text/javascript">
190		- $(document).ready(function() {
	182	+ $(function() {
191	183	$yobi.loadModule("project.New", {
192		- "sFormName" : "newproject"
	184	+ "sFormId": "#newProjectForm",
	185	+ "htError": @Html(newProjectForm.errorsAsJson.toString)
193	186	});
194	187	});
195	188	</script>

...	...	@@ -27,7 +27,7 @@
27	27	<div class="page-wrap-outer">
28	28	<div class="project-page-wrap">
29	29	<div class="form-wrap new-project">
30		- <form id="importGit" action="@routes.ImportApp.newProject()" method="post" name="newproject" class="frm-wrap">
	30	+ <form id="importGit" action="@routes.ImportApp.newProject()" method="post" class="frm-wrap">
31	31	<legend>
32	32	@Messages("project.import.from.git")
33	33	<span>
...	...	@@ -48,11 +48,6 @@
48	48	</dt>
49	49	<dd>
50	50	<input id="url" type="text" name="url" class="text" placeholder="@Messages("project.git.url.alert")" value="@newProjectForm.field("url").value">
51		- <div class="n-alert" data-errType="url">
52		- <div class="orange-txt">
53		- @if(newProjectForm.error("url") != null) { <span class="warning">@Messages(newProjectForm.error("url").message())</span> }
54		- </div>
55		- </div>
56	51	</dd>
57	52	<!-- // -->
58	53	<!-- ProjectOwner -->
...	...	@@ -79,11 +74,9 @@
79	74	</option>
80	75	}
81	76	</select>
82		- <div class="n-alert" data-errType="owner">
83		- <div class="orange-txt">
84		- @if(newProjectForm.error("owner") != null) { <span class="warning">@Messages(newProjectForm.error("owner").message())</span> }
85		- </div>
86		- </div>
	77	+ @if(newProjectForm.error("owner") != null) {
	78	+ <span class="orange-text">@Messages(newProjectForm.error("owner").message())</span>
	79	+ }
87	80	</dd>
88	81	<!-- // -->
89	82
...	...	@@ -97,12 +90,6 @@
97	90	<dd>
98	91	<input id="project-name" type="text" name="name" class="text" maxlength="250" pattern="[a-zA-Z0-9-]+"
99	92	value="@newProjectForm.field("name").value" placeholder="@Messages("project.name.alert")" >
100		- <div class="n-alert" data-errType="name">
101		- <div class="orange-txt">
102		- @if(newProjectForm.error("name") != null) { <span class="warning">@Messages(newProjectForm.error("name").message())</span> }
103		- <span class="msg wrongName" style="display: none;"></span>
104		- </div>
105		- </div>
106	93	</dd>
107	94	<!-- // -->
108	95
...	...	@@ -188,9 +175,10 @@
188	175
189	176	@common.select2()
190	177	<script type="text/javascript">
191		- $(document).ready(function(){
	178	+ $(function() {
192	179	$yobi.loadModule("project.New", {
193		- "sFormName": "newproject"
	180	+ "sFormId": "#importGit",
	181	+ "htError": @Html(newProjectForm.errorsAsJson.toString)
194	182	});
195	183	});
196	184	</script>

...	...	@@ -470,9 +470,9 @@
470	470	project.members = Project members
471	471	project.members.addMember = Add new member ID.
472	472	project.name = Project name
473		-project.name.alert = Characters that can be used in URL are allowed
	473	+project.name.alert = Enter name in alphabet, number or hyphen
474	474	project.name.duplicate = Same project name already exists.
475		-project.name.placeholder = Enter project name
	475	+project.name.placeholder = Enter project name in alphabet, number or hyphen
476	476	project.name.reserved.alert = You can''t use reserved names.
477	477	project.name.rule = Naming rules
478	478	project.new.agreement = I have read this user agreement and agree to all of its provisions.

...	...	@@ -361,10 +361,10 @@
361	361	project.members = メンバー
362	362	project.members.addMember = 追加するメンバーのIDを入力してください
363	363	project.name = プロジェクト名
364		-project.name.alert = プロジェクト名はURLで使える文字(半角ローマ字,数字,-'ハイフン')だけ使えます
	364	+project.name.alert = 半角英数字,ハイフン(-)だけにしてください
365	365	project.name.duplicate = すでに同じな名前のプロジェクトがあります
366		-project.name.placeholder = プロジェクト名を入力してください
367		-project.name.reserved.alert = Name is reserved
	366	+project.name.placeholder = プロジェクト名には半角英数字,ハイフン(-)のみ使用できます
	367	+project.name.reserved.alert = 予約語は使用できません
368	368	project.name.rule = 名前規則
369	369	project.new.agreement = 利用契約に同意する
370	370	project.new.vcsType.git = Git
...	...	@@ -373,9 +373,12 @@
373	373	project.onwatching = <strong>{0}</strong>
374	374	project.owner = 作成者名
375	375	project.private = 非公開
376		-project.private.notice = 非公開プロジェクトもプロジェクト名、説明、ロゴなどは誰にでも見えます。
	376	+project.private.notice = プロジェクトメンバーだけに接近を許します。ただし、プロジェクト名、説明、ロゴなどは一般に公開されます
377	377	project.projects = プロジェクト
	378	+project.protected = グループ内公開
	379	+project.protected.notice = 同じグループ内の人々とプロジェクトメンバーだけに接近を許します
378	380	project.public = 公開
	381	+project.public.notice =　誰もこのプロジェクトに接近できます
379	382	project.readme = プロジェクトに関する説明をREADME.mdファイルで作成してリポジトリールートに追加したらここに表示されます
380	383	project.searchPlaceholder = このプロジェクトで検索
381	384	project.setting = 設定

...	...	@@ -50,6 +50,10 @@
50	50	.border-radius(2px);
51	51	.box-shadow(-2px 2px 1px rgba(0,0,0,0.1));
52	52	}
	53	+.popover-content {
	54	+ padding:9px 10px;
	55	+ line-height:120%;
	56	+}
53	57
54	58	/ yobi.ui.Dropdown /
55	59	.dropdown-toggle {

...	...	@@ -468,10 +468,10 @@
468	468	project.members = 프로젝트 멤버
469	469	project.members.addMember = 새로운 멤버의 아이디를 입력하세요
470	470	project.name = 프로젝트 이름
471		-project.name.alert = 프로젝트 이름은 URL로 사용할 수 있는 글자(영문자,숫자,-'하이픈')만 허용합니다
	471	+project.name.alert = 영문, 숫자, 하이픈(-)만 입력해주세요
472	472	project.name.duplicate = 이미 같은 이름의 프로젝트가 있습니다
473		-project.name.placeholder = 프로젝트 이름을 입력해주세요.
474		-project.name.reserved.alert = 예약된 이름으로 사용할 수 없습니다.
	473	+project.name.placeholder = 프로젝트 이름은 영문, 숫자, 하이픈(-)만 사용할 수 있습니다
	474	+project.name.reserved.alert = 예약된 이름으로 사용할 수 없습니다
475	475	project.name.rule = 이름 규칙
476	476	project.new.agreement = 본인은 약관에 대한 안내를 읽었으며 이에 동의합니다
477	477	project.new.vcsType.git = Git

...	...	@@ -27,20 +27,18 @@
27	27	var htElement = {};
28	28
29	29	function _init(htOptions){
30		- _initVar(htOptions);
31		- _initElement();
	30	+ _initVar();
	31	+ _initElement(htOptions);
32	32	_attachEvent();
	33	+ _focusOnFirstField();
33	34
34		- _initFormValidator();
35		-
36		- htElement.welInputProjectName.focus();
	35	+ _showErrors(htOptions.htError);
37	36	}
38	37
39	38	/**
40	39	* initialize variables
41	40	*/
42		- function _initVar(htOptions){
43		- htVar.sFormName = htOptions.sFormName \|\| "newproject";
	41	+ function _initVar(){
44	42	htVar.rxPrjName = /^[0-9A-Za-z-_\.]+$/;
45	43	htVar.aReservedWords = [".", "..", ".git"];
46	44	}
...	...	@@ -48,11 +46,14 @@
48	46	/**
49	47	* initialize element
50	48	*/
51		- function _initElement(){
52		- htElement.vcsSelect = $("#vcs");
53		- htElement.svnWarning = $("#svn");
	49	+ function _initElement(htOptions){
	50	+ htElement.welForm = $(htOptions.sFormId);
54	51	htElement.welInputProjectName = $("#project-name");
55	52	htElement.welInputProjectOwner = $("#project-owner");
	53	+ htElement.welInputGitRepoURL = $("#url");
	54	+
	55	+ htElement.vcsSelect = $("#vcs");
	56	+ htElement.svnWarning = $("#svn");
56	57	htElement.welProtected = $("#opt-protected");
57	58	}
58	59
...	...	@@ -62,6 +63,7 @@
62	63	function _attachEvent(){
63	64	htElement.vcsSelect.on("change", _onChangeVCSItem);
64	65	htElement.welInputProjectOwner.on("change", _onChangeProjectOwner);
	66	+ htElement.welForm.on("submit", _validateForm);
65	67	}
66	68
67	69	function _onChangeVCSItem(evt){
...	...	@@ -74,6 +76,7 @@
74	76
75	77	function _onChangeProjectOwner() {
76	78	var sType = $("#project-owner option:selected").data("type");
	79	+
77	80	if (sType == "user") {
78	81	if ($("#protected").is(":checked")) {
79	82	$("#public").prop("checked", true);
...	...	@@ -84,63 +87,76 @@
84	87	}
85	88	}
86	89
87		- /**
88		- * initialize formValidator
89		- * @require validate.js
90		- */
91		- function _initFormValidator(){
92		- // name : name of input element
93		- // rules: rules to apply to the input element.
94		- var aRules = [];
95		-
96		- htVar.oValidator = new FormValidator(htVar.sFormName, aRules, function(aErrors){
97		- var oForm = $(document.forms[htVar.sFormName]);
98		- var oElement = oForm.find("input[name=name]");
99		- var sPrjName = oElement.val();
100		- if(!htVar.rxPrjName.test(sPrjName)){
101		- aErrors.push({
102		- id: oElement.attr("id"),
103		- name: oElement.attr("name"),
104		- message: Messages("project.name.alert")
105		- });
106		- }
107		- if(htVar.aReservedWords.indexOf(sPrjName) >= 0){
108		- aErrors.push({
109		- id: oElement.attr("id"),
110		- name: oElement.attr("name"),
111		- message: Messages("project.name.reserved.alert")
112		- });
113		- }
114		- _onFormValidate(aErrors);
115		- });
	90	+ function _focusOnFirstField(){
	91	+ if(htElement.welInputGitRepoURL.length > 0){
	92	+ htElement.welInputGitRepoURL.focus();
	93	+ } else {
	94	+ htElement.welInputProjectName.focus();
	95	+ }
116	96	}
117	97
118	98	/**
119		- * handler for validation errors.
	99	+ * Validate form on submit
	100	+ *
	101	+ * @private
120	102	*/
121		- function _onFormValidate(aErrors){
122		- if(aErrors.length > 0){
123		- $('span.warning').hide();
124		- $('span.msg').html(aErrors[0].message).show();
125		- } else {
126		- new Spinner({
127		- lines: 13, // The number of lines to draw
128		- length: 10, // The length of each line
129		- width: 5, // The line thickness
130		- radius: 10, // The radius of the inner circle
131		- corners: 1, // Corner roundness (0..1)
132		- rotate: 0, // The rotation offset
133		- direction: 1, // 1: clockwise, -1: counterclockwise
134		- color: '#000', // #rgb or #rrggbb
135		- speed: 1, // Rounds per second
136		- trail: 60, // Afterglow percentage
137		- shadow: false, // Whether to render a shadow
138		- hwaccel: false, // Whether to use hardware acceleration
139		- className: 'spinner', // The CSS class to assign to the spinner
140		- zIndex: 2e9, // The z-index (defaults to 2000000000)
141		- top: 'auto', // Top position relative to parent in px
142		- left: 'auto' // Left position relative to parent in px
143		- }).spin(document.forms[htVar.sFormName]);
	103	+ function _validateForm(evt){
	104	+ var error = {};
	105	+ var projectName = htElement.welInputProjectName.val();
	106	+
	107	+ if(projectName.length === 0){
	108	+ error.name = error.name \|\| [];
	109	+ error.name.push(Messages("project.name.alert"));
	110	+ }
	111	+
	112	+ if(!htVar.rxPrjName.test(projectName)){
	113	+ error.name = error.name \|\| [];
	114	+ error.name.push(Messages("project.name.alert"));
	115	+ }
	116	+
	117	+ if(htVar.aReservedWords.indexOf(projectName) > -1){
	118	+ error.name = error.name \|\| [];
	119	+ error.name.push(Messages("project.name.reserved.alert"));
	120	+ }
	121	+
	122	+ if(htElement.welInputGitRepoURL.length > 0 &&
	123	+ htElement.welInputGitRepoURL.val().trim().length === 0 ){
	124	+ error.url = error.url \|\| [];
	125	+ error.url.push(Messages("project.import.error.empty.url"));
	126	+ }
	127	+
	128	+ if(!$.isEmptyObject(error)){
	129	+ _showErrors(error);
	130	+ evt.preventDefault();
	131	+ return false;
	132	+ }
	133	+
	134	+ yobi.ui.Spinner.show();
	135	+ }
	136	+
	137	+ /**
	138	+ * Show error message on target element with $.popover
	139	+ *
	140	+ * @param error
	141	+ * @private
	142	+ */
	143	+ function _showErrors(error){
	144	+ if(!error){
	145	+ return;
	146	+ }
	147	+
	148	+ var targetElement;
	149	+
	150	+ for(var target in error){
	151	+ targetElement = htElement.welForm.find("[name=" + target + "]");
	152	+
	153	+ if(targetElement.length > 0) {
	154	+ targetElement.popover({
	155	+ "trigger" : "manual",
	156	+ "placement": "left",
	157	+ "content" : error[target].shift()
	158	+ }).popover("show");
	159	+ }
144	160	}
145	161	}
146	162

Delete comment