Skip to content

Commit

Permalink
Item10203: use inline form validation on registration page
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.foswiki.org/trunk@10436 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
  • Loading branch information
ArthurClemens authored and ArthurClemens committed Dec 28, 2010
1 parent 427bdd9 commit ea3a4e3
Showing 1 changed file with 119 additions and 35 deletions.
154 changes: 119 additions & 35 deletions TopicUserMappingContrib/data/System/DefaultUserRegistration.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ else=" %IF{"$REGISTRATION_DISABLED!='DISABLED'" then=" *%MAKETEXT{"Create your a
<!--
Show the form, if not REGISTRATION_DISABLED
-->
%INCLUDE{"%TOPIC%" section="form%REGISTRATION_DISABLED%" warn="off"}%<p>
%INCLUDE{"%TOPIC%" section="form%REGISTRATION_DISABLED%" warn="on"}%<p>
%MAKETEXT{"If you have any questions about registration, send an e-mail to [_1]." args="<a href='mailto:%WIKIWEBMASTER%?subject=%TOPIC%&#32;Question'>%WIKIWEBMASTER%</a>"}%
</p>
<verbatim class="foswikiHidden">
Expand All @@ -26,7 +26,7 @@ All the topic sections.
The main section is "form", INCLUDEd when REGISTRATION_DISABLED is not 'DISABLED'.
Other sections define the fields and extra info text.

%STARTSECTION{"form"}%<div class="registration"><form name="registration" action="%SCRIPTURLPATH{"register"}%/%USERSWEB%/%HOMETOPIC%" method="post">
%STARTSECTION{"form"}%<div class="registration"><form name="registration" id="foswikiRegistration" action="%SCRIPTURLPATH{"register"}%/%USERSWEB%/%HOMETOPIC%" method="post">
<div class="foswikiFormSteps">
<div class="foswikiFormStep">
<p><em>%MAKETEXT{"Fields marked <span class='required'>*</span> are required"}%</em></p>
Expand All @@ -50,7 +50,9 @@ $REGISTRATIONGROUPTYPE = "automatic"' then='$percentINCLUDE{"%WEB%.%TOPIC%" sect
<input type="hidden" name="action" value="register" />
</form>
</div>
%ADDTOZONE{"head" id="UserRegistrationStyle"
%ADDTOZONE{
"head"
id="UserRegistrationStyle"
text="<style type='text/css' media='all'>
.registration .foswikiFormSteps {
margin:.5em 0 1em 0;
Expand All @@ -65,7 +67,7 @@ text="<style type='text/css' media='all'>
}
/* horizontal layout */
/* for the 3 'columns' we use: 25% 30% 40% */
.registration label {
.registration label.desc {
width:25%;
}
.registration li div {
Expand All @@ -77,10 +79,18 @@ text="<style type='text/css' media='all'>
.registration .foswikiTextarea {
width:40%;
}
.registration li em {
display:block;
margin:0 0 0 43%;
padding:2px;
.registration em {
font-style:normal;
}
.registration label.expl,
.registration label.error {
float:left;
width:40%;
padding:0 0 0 27px;
text-align:left;
color:#666;
font-size:86%;
line-height:125%;
}
/* END horizontal layout */
.registration ul {
Expand All @@ -95,13 +105,13 @@ text="<style type='text/css' media='all'>
clear:both;
min-height:1em;
}
.registration label {
.registration label.desc {
float:left;
margin:0;
padding:0;
text-align:right;
}
.registration .joinGroups label {
.registration .joinGroups label.desc {
float:none;
}
.registration .foswikiInputField,
Expand All @@ -110,69 +120,139 @@ text="<style type='text/css' media='all'>
float:left;
margin-top:-2px;
}
.registration em {
font-style:normal;
font-size:94%;
line-height:110%;
color:#666;
}
.registration .required {
padding:0 .3em;
color:#f00;
}
.registration .foswikiInputField.error {
background:#fcc;
}
.registration label.error {
color:#f00;
background:url(%ICONURLPATH{choice-no}%) no-repeat 6px 0;
}
.registration label.checked {
background:none;
}
</style>"
}%%TMPL:P{JavascriptFiles/foswikiString"}%%ENDSECTION{"form"}%
}%
%JQREQUIRE{"validate"}%
%ADDTOZONE{
"script"
id="UserRegistrationValidation"
text="<script type='text/javascript'>
$(document).ready(
function() {
$('#foswikiRegistration').validate({
rules: {
Twk1FirstName: 'required',
Twk1LastName: 'required',
Twk1WikiName: {
required: true,
remote: function() {
return '%SCRIPTURL{view}%/%BASEWEB%/%BASETOPIC%?section=checkname;skin=text;name=' + $('#Twk1WikiName').val();
}
},
Twk1LoginName: 'required',
Twk1Email: {
required: true,
email: true
},
Twk1Password: {
required: true,
minlength: %QUERY{"{MinPasswordLength}"}%
},
Twk1Confirm: {
required: true,
minlength: %QUERY{"{MinPasswordLength}"}%,
equalTo: '#Twk1Password'
}
},
messages: {
Twk1FirstName: '%MAKETEXT{"Please enter your first name"}%',
Twk1LastName: '%MAKETEXT{"Please enter your last name"}%',
Twk1WikiName: {
required: '%MAKETEXT{"Please enter a valid Wiki name"}%',
remote: jQuery.format('{0} is already in use')
},
Twk1Email: '%MAKETEXT{"Please enter a valid email address"}%',
Twk1LoginName: '%MAKETEXT{"Please enter a login name"}%',
Twk1Password: {
required: '%MAKETEXT{"Please enter a password"}%',
minlength: '%MAKETEXT{"Your password must be at least [_1] characters long" args="%QUERY{"{MinPasswordLength}"}%"}%'
},
Twk1Confirm: {
required: '%MAKETEXT{"Please confirm your password"}%',
equalTo: '%MAKETEXT{"Please enter the same password as above"}%',
minlength: '%MAKETEXT{"Your password must be at least [_1] characters long" args="%QUERY{"{MinPasswordLength}"}%"}%'
}
},
success: function(label) {
// remove generated label
var generated = $(label).parent().attr('generated');
if (generated) {
generated.remove();
}
}
});
}
);
</script>"
requires="JQUERYPLUGIN::VALIDATE"
}%
%TMPL:P{JavascriptFiles/foswikiString"}%
%ENDSECTION{"form"}%



Required field first name

%STARTSECTION{"requiredField_firstName"}%<li><label for="Twk1FirstName"><span class="required">*</span>%MAKETEXT{"First name"}%</label>
%STARTSECTION{"requiredField_firstName"}%<li><label class="desc" for="Twk1FirstName"><span class="required">*</span>%MAKETEXT{"First name"}%</label>
<div><input type="text" id="Twk1FirstName" name="Twk1FirstName" size="40" class="foswikiInputField foswikiFocus" value="" tabindex="1" onblur="this.form.Twk1WikiName.value=foswiki.String.makeWikiWord(this.value+' '+this.form.Twk1LastName.value)" /></div></li>%ENDSECTION{"requiredField_firstName"}%



Required field last name

%STARTSECTION{"requiredField_lastName"}%<li><label for="Twk1LastName"><span class="required">*</span>%MAKETEXT{"Last name"}%</label>
%STARTSECTION{"requiredField_lastName"}%<li><label class="desc" for="Twk1LastName"><span class="required">*</span>%MAKETEXT{"Last name"}%</label>
<div><input type="text" id="Twk1LastName" name="Twk1LastName" size="40" class="foswikiInputField" value="" tabindex="2" onblur="this.form.Twk1WikiName.value=foswiki.String.makeWikiWord(this.form.Twk1FirstName.value+' '+this.value)" /></div></li>%ENDSECTION{"requiredField_lastName"}%



Required field wiki name

%STARTSECTION{"requiredField_wikiName"}%<li><label for="Twk1WikiName"><span class="required">*</span>%MAKETEXT{"Wiki name"}%</label>
<div><input type="text" id="Twk1WikiName" name="Twk1WikiName" size="40" class="foswikiInputField" value="" tabindex="3" onblur="" /><em>%MAKETEXT{"Your name as displayed online. Note, this must be a unique [[%SYSTEMWEB%.WikiName][Wiki name]]. By default it is derived from your first and last name."}%</em></div></li>%ENDSECTION{"requiredField_wikiName"}%
%STARTSECTION{"requiredField_wikiName"}%<li><label class="desc" for="Twk1WikiName"><span class="required">*</span>%MAKETEXT{"Wiki name"}%</label>
<div><input type="text" id="Twk1WikiName" name="Twk1WikiName" size="40" class="foswikiInputField" value="" tabindex="3" onblur="" /><label class="expl">%MAKETEXT{"Your name as displayed online. This must be a unique [[%SYSTEMWEB%.WikiName][Wiki name]]."}%</em></div></li>%ENDSECTION{"requiredField_wikiName"}%



Required field login name
Only shown if ALLOWLOGINNAME is true.

%STARTSECTION{"requiredField_loginName"}%<li><label for="Twk1LoginName"><span class="required">*</span>%MAKETEXT{"Login name"}%</label>
<div><input type="text" id="Twk1LoginName" name="Twk1LoginName" size="40" class="foswikiInputField" value="%REMOTE_USER%" tabindex="4" onblur="" /><em>%MAKETEXT{"The login name you use to sign in."}%</em></div></li>%ENDSECTION{"requiredField_loginName"}%
%STARTSECTION{"requiredField_loginName"}%<li><label class="desc" for="Twk1LoginName"><span class="required">*</span>%MAKETEXT{"Login name"}%</label>
<div><input type="text" id="Twk1LoginName" name="Twk1LoginName" size="40" class="foswikiInputField" value="%REMOTE_USER%" tabindex="4" onblur="" /><label class="expl">%MAKETEXT{"The login name you use to sign in."}%</em></div></li>%ENDSECTION{"requiredField_loginName"}%



Required field email

%STARTSECTION{"requiredField_email"}%<li><label for="Twk1Email"><span class="required">*</span>%MAKETEXT{"Email address"}%</label>
<div><input type="text" id="Twk1Email" name="Twk1Email" size="40" class="foswikiInputField" value="" tabindex="5" onblur="" /><em>%MAKETEXT{"Your email address will be kept confidential."}%</em></div></li>%ENDSECTION{"requiredField_email"}%
%STARTSECTION{"requiredField_email"}%<li><label class="desc" for="Twk1Email"><span class="required">*</span>%MAKETEXT{"Email address"}%</label>
<div><input type="text" id="Twk1Email" name="Twk1Email" size="40" class="foswikiInputField" value="" tabindex="5" onblur="" /><label class="expl">%MAKETEXT{"Your email address will be kept confidential."}%</em></div></li>%ENDSECTION{"requiredField_email"}%



Required field password
Only shown if the password manager supports changing the password / email.

%STARTSECTION{"requiredField_password"}%<li><label for="Twk1Password"><span class="required">*</span>%MAKETEXT{"Your password"}%</label>
<div><input type="password" id="Twk1Password" name="Twk1Password" size="40" class="foswikiInputField" value="" tabindex="6" onblur="" /></div></li>%IF{"NOT {Register}{DisablePasswordConfirmation}" then="<li><label for=\"Twk1Confirm\"><span class=\"required\">*</span>$percntMAKETEXT{\"Confirm password\"}$percnt</label>
%STARTSECTION{"requiredField_password"}%<li><label class="desc" for="Twk1Password"><span class="required">*</span>%MAKETEXT{"Your password"}%</label>
<div><input type="password" id="Twk1Password" name="Twk1Password" size="40" class="foswikiInputField" value="" tabindex="6" onblur="" /></div></li>%IF{"NOT {Register}{DisablePasswordConfirmation}" then="<li><label class=\"desc\" for=\"Twk1Confirm\"><span class=\"required\">*</span>$percntMAKETEXT{\"Confirm password\"}$percnt</label>
<div><input type=\"password\" id=\"Twk1Confirm\" name=\"Twk1Confirm\" size=\"40\" class=\"foswikiInputField\" value=\"\" tabindex=\"7\" onblur=\"\" /></div></li>"}%%ENDSECTION{"requiredField_password"}%



Optional field join group

enable by setting =REGISTRATIONGROUPTYPE= in the %USERSWEB%.DefaultPreferences topic to automatic, one, mulitple.
enable by setting =REGISTRATIONGROUPTYPE= in the %USERSWEB%.DefaultPreferences topic to automatic, one, multiple.

%STARTSECTION{"extraField_groups"}%%FORMAT{
"%IF{"defined 'REGISTRATIONGROUPS'" then="%REGISTRATIONGROUPS%" else="%GROUPINFO{
Expand Down Expand Up @@ -208,13 +288,13 @@ Section rendergroup
parameters: groupname, inputtype

%STARTSECTION{"rendergroup"}%<input type="%inputtype%" name="Twk0AddToGroups" id="cb_%groupname%" value="%groupname%" />
<label for="cb_%groupname%">%IF{"istopic '%USERSWEB%.%groupname%'" then=" [[%USERSWEB%.%groupname%][%groupname%]] " else="%groupname%" }%</label>%ENDSECTION{"rendergroup"}%
<label class="desc" for="cb_%groupname%">%IF{"istopic '%USERSWEB%.%groupname%'" then=" [[%USERSWEB%.%groupname%][%groupname%]] " else="%groupname%" }%</label>%ENDSECTION{"rendergroup"}%


Section rendergroupheader
parameters:

%STARTSECTION{"rendergroupheader"}%<li><label for="Twk0AddToGroups">%MAKETEXT{"Select Group [_1] to join" args="%multiple%"}%</label>
%STARTSECTION{"rendergroupheader"}%<li><label class="desc" for="Twk0AddToGroups">%MAKETEXT{"Select Group [_1] to join" args="%multiple%"}%</label>
<div class="joinGroups">%ENDSECTION{"rendergroupheader"}%


Expand All @@ -232,21 +312,21 @@ Section hiddenrendergroupheader

Optional field organisation name

%STARTSECTION{"extraField_organisationName"}%<li><label for="Twk0OrganisationName"><span class="required">*</span>%MAKETEXT{"Organisation name"}%</label>
%STARTSECTION{"extraField_organisationName"}%<li><label class="desc" for="Twk0OrganisationName">%MAKETEXT{"Organisation name"}%</label>
<div><input type="text" id="Twk0OrganisationName" name="Twk0OrganisationName" size="40" class="foswikiInputField" value="" tabindex="8" onblur="" /></div></li>%ENDSECTION{"extraField_organisationName"}%



Optional field organisation url

%STARTSECTION{"extraField_organisationUrl"}%<li><label for="Twk0OrganisationURL"><span class="required">*</span>%MAKETEXT{"Organisation website"}%</label>
%STARTSECTION{"extraField_organisationUrl"}%<li><label class="desc" for="Twk0OrganisationURL">%MAKETEXT{"Organisation website"}%</label>
<div><input type="text" id="Twk0OrganisationURL" name="Twk0OrganisationURL" size="40" class="foswikiInputField" value="http://" tabindex="9" /></div></li>%ENDSECTION{"extraField_organisationUrl"}%



Optional field country

%STARTSECTION{"extraField_country"}%<li><label for="Twk0Country">%MAKETEXT{"Country"}%</label>
%STARTSECTION{"extraField_country"}%<li><label class="desc" for="Twk0Country">%MAKETEXT{"Country"}%</label>
<div><select class="foswikiSelect" id="Twk0Country" name="Twk0Country" size="1" tabindex="10">%SEARCH{
"^\|[^\*\|]*\|"
topic="CountryList"
Expand All @@ -262,17 +342,21 @@ format="<option>$pattern(^\| *(.*?) *\|.*)</option>"

Required submit button

%STARTSECTION{"requiredButton_submit"}%<li><label>&nbsp;</label><div><input type="submit" tabindex="99" class="foswikiSubmit" value="%MAKETEXT{"Register"}%" /></div></li>%ENDSECTION{"requiredButton_submit"}%
%STARTSECTION{"requiredButton_submit"}%<li><label class="desc">&nbsp;</label><div><input type="submit" tabindex="99" class="foswikiSubmit" value="%MAKETEXT{"Register"}%" /></div></li>%ENDSECTION{"requiredButton_submit"}%



Optional privacy information

%STARTSECTION{"privacyInformation"}%<p> %MAKETEXT{"*Important:* the information provided in this form will be stored in a database on the web server. This database is accessible to anyone who can access the server through the web (though passwords will be encrypted, and e-mail addresses will be obfuscated to help prevent spamming). Your country, or the country where the server is hosted, may have Data Protection laws governing the maintenance of such databases. If you are in doubt, you should contact [_1] for details of the Data Protection Policy of this web server before registering." args="[[mailto:%WIKIWEBMASTER%?subject=Data%20Protection%20Policy][%WIKIWEBMASTER%]]"}%</p>%ENDSECTION{"privacyInformation"}%

</verbatim>


Test if user topic exists. Used for form validation.

%STARTSECTION{"checkname"}%%IF{"istopic '%USERSWEB%.%URLPARAM{"name"}%'" then="false" else="true"}%%ENDSECTION{"checkname"}%

</verbatim>



Expand Down

0 comments on commit ea3a4e3

Please sign in to comment.