register js validation

public/js/app.js

@@ -1,7 +1,9 @@
-var Gogits = {};
+var Gogits = {
+    "PageIsSignup": false
+};
 
-(function($){
+(function ($) {
-    Gogits.showTooltips = function(){
+    Gogits.showTooltips = function () {
         $("body").tooltip({
             selector: "[data-toggle=tooltip]"
             //container: "body"
@@ -13,10 +15,48 @@ var Gogits = {};
         }
         $(selector).tab("show");
         $(selector).find("li:eq(" + index + ") a").tab("show");
-    }
+    };
+    Gogits.validateForm = function (selector, options) {
+        var $form = $(selector);
+        options = options || {};
+        options.showErrors = function (map, list) {
+            var $error = $form.find('.form-error').addClass('hidden');
+            $('.has-error').removeClass("has-error");
+            $error.text(list[0].message).show().removeClass("hidden");
+            $(list[0].element).parents(".form-group").addClass("has-error");
+        };
+        $form.validate(options);
+    };
 })(jQuery);
 
 
-function initCore(){
+function initCore() {
     Gogits.showTooltips();
+}
+
+function initRegister() {
+    $.getScript("/js/jquery.validate.min.js", function () {
+        Gogits.validateForm("#gogs-login-card", {
+            rules: {
+                "username": {
+                    required: true,
+                    minlength: 5,
+                    maxlength: 30
+                },
+                "email": {
+                    required: true,
+                    email: true
+                },
+                "passwd": {
+                    required: true,
+                    minlength: 6,
+                    maxlength: 30
+                },
+                "re-passwd": {
+                    required: true,
+                    equalTo: "input[name=passwd]"
+                }
+            }
+        });
+    });
 }

public/js/jquery.validate.min.js

@@ -0,0 +1,2 @@
+/*! jQuery Validation Plugin - v1.11.1 - 3/22/2013\n* https://github.com/jzaefferer/jquery-validation
+* Copyright (c) 2013 Jörn Zaefferer; Licensed MIT */(function(t){t.extend(t.fn,{validate:function(e){if(!this.length)return e&&e.debug&&window.console&&console.warn("Nothing selected, can't validate, returning nothing."),void 0;var i=t.data(this[0],"validator");return i?i:(this.attr("novalidate","novalidate"),i=new t.validator(e,this[0]),t.data(this[0],"validator",i),i.settings.onsubmit&&(this.validateDelegate(":submit","click",function(e){i.settings.submitHandler&&(i.submitButton=e.target),t(e.target).hasClass("cancel")&&(i.cancelSubmit=!0),void 0!==t(e.target).attr("formnovalidate")&&(i.cancelSubmit=!0)}),this.submit(function(e){function s(){var s;return i.settings.submitHandler?(i.submitButton&&(s=t("<input type='hidden'/>").attr("name",i.submitButton.name).val(t(i.submitButton).val()).appendTo(i.currentForm)),i.settings.submitHandler.call(i,i.currentForm,e),i.submitButton&&s.remove(),!1):!0}return i.settings.debug&&e.preventDefault(),i.cancelSubmit?(i.cancelSubmit=!1,s()):i.form()?i.pendingRequest?(i.formSubmitted=!0,!1):s():(i.focusInvalid(),!1)})),i)},valid:function(){if(t(this[0]).is("form"))return this.validate().form();var e=!0,i=t(this[0].form).validate();return this.each(function(){e=e&&i.element(this)}),e},removeAttrs:function(e){var i={},s=this;return t.each(e.split(/\s/),function(t,e){i[e]=s.attr(e),s.removeAttr(e)}),i},rules:function(e,i){var s=this[0];if(e){var r=t.data(s.form,"validator").settings,n=r.rules,a=t.validator.staticRules(s);switch(e){case"add":t.extend(a,t.validator.normalizeRule(i)),delete a.messages,n[s.name]=a,i.messages&&(r.messages[s.name]=t.extend(r.messages[s.name],i.messages));break;case"remove":if(!i)return delete n[s.name],a;var u={};return t.each(i.split(/\s/),function(t,e){u[e]=a[e],delete a[e]}),u}}var o=t.validator.normalizeRules(t.extend({},t.validator.classRules(s),t.validator.attributeRules(s),t.validator.dataRules(s),t.validator.staticRules(s)),s);if(o.required){var l=o.required;delete o.required,o=t.extend({required:l},o)}return o}}),t.extend(t.expr[":"],{blank:function(e){return!t.trim(""+t(e).val())},filled:function(e){return!!t.trim(""+t(e).val())},unchecked:function(e){return!t(e).prop("checked")}}),t.validator=function(e,i){this.settings=t.extend(!0,{},t.validator.defaults,e),this.currentForm=i,this.init()},t.validator.format=function(e,i){return 1===arguments.length?function(){var i=t.makeArray(arguments);return i.unshift(e),t.validator.format.apply(this,i)}:(arguments.length>2&&i.constructor!==Array&&(i=t.makeArray(arguments).slice(1)),i.constructor!==Array&&(i=[i]),t.each(i,function(t,i){e=e.replace(RegExp("\\{"+t+"\\}","g"),function(){return i})}),e)},t.extend(t.validator,{defaults:{messages:{},groups:{},rules:{},errorClass:"error",validClass:"valid",errorElement:"label",focusInvalid:!0,errorContainer:t([]),errorLabelContainer:t([]),onsubmit:!0,ignore:":hidden",ignoreTitle:!1,onfocusin:function(t){this.lastActive=t,this.settings.focusCleanup&&!this.blockFocusCleanup&&(this.settings.unhighlight&&this.settings.unhighlight.call(this,t,this.settings.errorClass,this.settings.validClass),this.addWrapper(this.errorsFor(t)).hide())},onfocusout:function(t){this.checkable(t)||!(t.name in this.submitted)&&this.optional(t)||this.element(t)},onkeyup:function(t,e){(9!==e.which||""!==this.elementValue(t))&&(t.name in this.submitted||t===this.lastElement)&&this.element(t)},onclick:function(t){t.name in this.submitted?this.element(t):t.parentNode.name in this.submitted&&this.element(t.parentNode)},highlight:function(e,i,s){"radio"===e.type?this.findByName(e.name).addClass(i).removeClass(s):t(e).addClass(i).removeClass(s)},unhighlight:function(e,i,s){"radio"===e.type?this.findByName(e.name).removeClass(i).addClass(s):t(e).removeClass(i).addClass(s)}},setDefaults:function(e){t.extend(t.validator.defaults,e)},messages:{required:"This field is required.",remote:"Please fix this field.",email:"Please enter a valid email address.",url:"Please enter a valid URL.",date:"Please enter a valid date.",dateISO:"Please enter a valid date (ISO).",number:"Please enter a valid number.",digits:"Please enter only digits.",creditcard:"Please enter a valid credit card number.",equalTo:"Please enter the same value again.",maxlength:t.validator.format("Please enter no more than {0} characters."),minlength:t.validator.format("Please enter at least {0} characters."),rangelength:t.validator.format("Please enter a value between {0} and {1} characters long."),range:t.validator.format("Please enter a value between {0} and {1}."),max:t.validator.format("Please enter a value less than or equal to {0}."),min:t.validator.format("Please enter a value greater than or equal to {0}.")},autoCreateRanges:!1,prototype:{init:function(){function e(e){var i=t.data(this[0].form,"validator"),s="on"+e.type.replace(/^validate/,"");i.settings[s]&&i.settings[s].call(i,this[0],e)}this.labelContainer=t(this.settings.errorLabelContainer),this.errorContext=this.labelContainer.length&&this.labelContainer||t(this.currenLine truncated

routers/user/user.go

@@ -112,6 +112,7 @@ func SignIn(req *http.Request, r render.Render, session sessions.Session) {
 
 func SignUp(form auth.RegisterForm, data base.TmplData, req *http.Request, r render.Render) {
 	data["Title"] = "Sign Up"
+	data["PageIsSignUp"] = true
 
 	if req.Method == "GET" {
 		r.HTML(200, "user/signup", data)

templates/base/footer.tmpl

@@ -1,6 +1,7 @@
 <script>
     $(function(){
-       initCore();
+        initCore();
+        {{if .PageIsSignUp}}initRegister();{{end}}
     });
 </script>
 </body>

templates/user/signup.tmpl

@@ -3,41 +3,37 @@
 <div class="container" id="gogs-body">
 	<form action="/user/sign_up" method="post" class="form-horizontal gogs-card" id="gogs-login-card">
         <h3>Sign Up</h3>
-	{{if .HasError}}
+	    <div class="alert alert-danger form-error{{if .HasError}}{{else}} hidden{{end}}">{{.ErrorMsg}}</div>
-	<div class="alert alert-danger">{{.ErrorMsg}}</div>
-	{{end}}
 		<div class="form-group {{if .Err_Username}}has-error has-feedback{{end}}">
 			<label class="col-md-4 control-label">Username: </label>
 			<div class="col-md-6">
-				<input name="username" class="form-control" placeholder="Type your username" value="{{.username}}">
+				<input name="username" class="form-control" placeholder="Type your username" value="{{.username}}" required="required" title="Username must contain at least has 5 characters">
 			</div>
 		</div>
 		<div class="form-group {{if .Err_Email}}has-error has-feedback{{end}}">
 			<label class="col-md-4 control-label">Email: </label>
 			<div class="col-md-6">
-				<input name="email" class="form-control" placeholder="Type your e-mail address" value="{{.email}}">
+				<input name="email" class="form-control" placeholder="Type your e-mail address" value="{{.email}}" required="required" title="Email is not valid">
 			</div>
 		</div>
 
 		<div class="form-group {{if .Err_Password}}has-error has-feedback{{end}}">
 			<label class="col-md-4 control-label">Password: </label>
 			<div class="col-md-6">
-				<input name="passwd" type="password" class="form-control" placeholder="Type your password">
+				<input name="passwd" type="password" class="form-control" placeholder="Type your password" required="required" title="Password must contain at least has 6 characters">
 			</div>
 		</div>
 		<div class="form-group">
 			<label class="col-md-4 control-label">Re-type: </label>
 			<div class="col-md-6">
-				<input type="password" class="form-control" placeholder="Re-type your password">
+				<input name="re-passwd" type="password" class="form-control" placeholder="Re-type your password" required="required" title="Re-type Password must be same to Password">
 			</div>
 		</div>
-
 		<div class="form-group">
 		    <div class="col-md-offset-4 col-md-6">
 		    	<button type="submit" class="btn btn-lg btn-primary">Create an account</button>
 		    </div>
 		</div>
-
 	    <div class="form-group">
             <div class="col-md-offset-4 col-md-6">
                 <a href="/user/login">Already have an account? Sign in now!</a>