Forms: Added red asterisk to mandatory fields and red colour to requi…

…red text (partially fixes #4812)
wet-boew · Mar 15, 2014 · a597809 · a597809
1 parent b6ba124
commit a597809
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 19 deletions.
diff --git a/src/base/partials/_forms.scss b/src/base/partials/_forms.scss
@@ -0,0 +1,21 @@
+/*
+  WET-BOEW
+  @title: Form additions to WET-BOEW
+ */
+%forms-color-c00 {
+	color: #c00;
+}
+label, legend {
+	&.required {
+		&:before {
+			@extend %forms-color-c00;
+			content: "* ";
+			margin-left: -0.665em;
+		}
+		strong {
+			&.required {
+				@extend %forms-color-c00;	
+			}
+		}
+	}
+}
diff --git a/src/base/wet-boew.scss b/src/base/wet-boew.scss
@@ -57,6 +57,7 @@ $icon-font-path: "../fonts/";
 @import "partials/transitions";
 @import "partials/proximity";
 @import "partials/lists";
+@import "partials/forms";
 
 /*
  Plugins

diff --git a/src/other/feedback/feedback-en.hbs b/src/other/feedback/feedback-en.hbs
@@ -18,7 +18,7 @@
 		<input type="hidden" name="language" value="en" />
 		<div id="type">
 			<div class="form-group">
-				<label for="fbrsn"><span class="field-name">Reason for contacting us</span> <strong>(required)</strong></label>
+				<label for="fbrsn" class="required"><span class="field-name">Reason for contacting us</span> <strong class="required">(required)</strong></label>
 				<select class="form-control" name="fbrsn" id="fbrsn" required="required">
 					<option value=""> </option>
 					<option value="web">Critical problem with the website</option>
@@ -34,7 +34,7 @@
 				<input class="form-control" type="text" id="fbsbj" name="fbsbj" size="45" maxlength="60" />
 			</div>
 			<div class="form-group">
-				<label for="fbmsg"><span class="field-name">Message</span> <strong>(required)</strong></label>
+				<label for="fbmsg" class="required"><span class="field-name">Message</span> <strong class="required">(required)</strong></label>
 				<textarea class="form-control" id="fbmsg" name="fbmsg" rows="5" cols="45" required="required"></textarea>
 			</div>
 		</div>
@@ -160,7 +160,7 @@
 						<input class="form-control" type="text" id="fbnm" name="fbnm" size="45" maxlength="45" pattern=".{2,}" data-rule-minlength="2" />
 					</div>
 					<div class="form-group">
-						<label for="fbeml"><span class="field-name">E-mail address</span> <strong>(required)</strong></label>
+						<label for="fbeml" class="required"><span class="field-name">E-mail address</span> <strong class="required">(required)</strong></label>
 						<input class="form-control" type="email" id="fbeml" name="fbeml" size="45" maxlength="60" required="required" />
 					</div>
 					<div class="form-group">

diff --git a/src/other/feedback/feedback-fr.hbs b/src/other/feedback/feedback-fr.hbs
@@ -18,7 +18,7 @@
 		<input type="hidden" name="language" value="fr" />
 		<div id="type">
 			<div class="form-group">
-				<label for="fbrsn"><span class="field-name">Raison pour communiquer avec nous</span> <strong>(obligatoire)</strong></label>
+				<label for="fbrsn" class="required"><span class="field-name">Raison pour communiquer avec nous</span> <strong class="required">(obligatoire)</strong></label>
 				<select class="form-control" name="fbrsn" id="fbrsn" required="required">
 					<option value=""> </option>
 					<option value="web">Problème critique avec le site Web</option>
@@ -34,7 +34,7 @@
 				<input class="form-control" type="text" id="fbsbj" name="fbsbj" size="45" maxlength="60" />
 			</div>
 			<div class="form-group">
-				<label for="fbmsg"><span class="field-name">Message</span> <strong>(obligatoire)</strong></label>
+				<label for="fbmsg" class="required"><span class="field-name">Message</span> <strong class="required">(obligatoire)</strong></label>
 				<textarea class="form-control" id="fbmsg" name="fbmsg" rows="5" cols="45" required="required"></textarea>
 			</div>
 		</div>
@@ -160,7 +160,7 @@
 						<input class="form-control" type="text" id="fbnm" name="fbnm" size="45" maxlength="45" pattern=".{2,}" data-rule-minlength="2" />
 					</div>
 					<div class="form-group">
-						<label for="fbeml"><span class="field-name">Adresse de courriel</span> <strong>(obligatoire)</strong></label>
+						<label for="fbeml" class="required"><span class="field-name">Adresse de courriel</span> <strong class="required">(obligatoire)</strong></label>
 						<input class="form-control" type="email" id="fbeml" name="fbeml" size="45" maxlength="60" required="required" />
 					</div>
 					<div class="form-group">

diff --git a/src/plugins/formvalid/formvalid-en.hbs b/src/plugins/formvalid/formvalid-en.hbs
@@ -15,7 +15,7 @@
 		<fieldset>
 			<legend>Contact information</legend>
 			<div class="form-group">
-				<label for="title1"><span class="field-name">Title</span> <strong>(required)</strong></label>
+				<label for="title1" class="required"><span class="field-name">Title</span> <strong class="required">(required)</strong></label>
 				<select class="form-control" id="title1" name="title1" required="required">
 					<option label="Select a title"></option>
 					<option value="dr">Dr.</option>
@@ -25,15 +25,15 @@
 				</select>
 			</div>
 			<div class="form-group">
-				<label for="fname1"><span class="field-name">First Name</span> <strong>(required)</strong></label>
+				<label for="fname1" class="required"><span class="field-name">First Name</span> <strong class="required">(required)</strong></label>
 				<input class="form-control" id="fname1" name="fname1" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
 			</div>
 			<div class="form-group">
-				<label for="lname1"><span class="field-name">Last Name</span> <strong>(required)</strong></label>
+				<label for="lname1" class="required"><span class="field-name">Last Name</span> <strong class="required">(required)</strong></label>
 				<input class="form-control" id="lname1" name="lname1" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
 			</div>
 			<div class="form-group">
-				<label for="tel1"><span class="field-name">Telephone Number</span> (999-999-9999) <strong>(required)</strong></label>
+				<label for="tel1" class="required"><span class="field-name">Telephone Number</span> (999-999-9999) <strong class="required">(required)</strong></label>
 				<input class="form-control" id="tel1" name="tel1" type="tel" required="required" data-rule-phoneUS="true" />
 			</div>
 			<div class="form-group">
@@ -83,7 +83,7 @@
 		</fieldset>
 
 		<fieldset>
-			<legend><span class="field-name">Favourite pet</span> (select at least one of the following options)</legend>
+			<legend class="required"><span class="field-name">Favourite pet</span> <strong class="required">(required)</strong></legend>
 			<div class="checkbox">
 				<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" required="required" />&#160;&#160;Dog</label>
 			</div>
@@ -99,7 +99,7 @@
 		</fieldset>
 
 		<fieldset>
-			<legend><span class="field-name">Citizenship status</span></legend>
+			<legend class="required"><span class="field-name">Citizenship status</span> <strong class="required">(required)</strong></legend>
 			<div class="radio">
 				<label for="status1"><input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Canadian citizen</label>
 			</div>

diff --git a/src/plugins/formvalid/formvalid-fr.hbs b/src/plugins/formvalid/formvalid-fr.hbs
@@ -15,7 +15,7 @@
 		<fieldset>
 			<legend>Coordonnées</legend>
 			<div class="form-group">
-				<label for="title1"><span class="field-name">Titre</span> <strong>(obligatoire)</strong></label>
+				<label for="title1" class="required"><span class="field-name">Titre</span> <strong class="required">(obligatoire)</strong></label>
 				<select class="form-control" id="title1" name="title1" required="required">
 					<option label="Sélectionner un titre"></option>
 					<option value="dr">D. Ph.</option>
@@ -25,15 +25,15 @@
 				</select>
 			</div>
 			<div class="form-group">
-				<label for="fname"><span class="field-name">Prénom</span> <strong>(obligatoire)</strong></label>
+				<label for="fname" class="required"><span class="field-name">Prénom</span> <strong class="required">(obligatoire)</strong></label>
 				<input class="form-control" id="fname" name="fname" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
 			</div>
 			<div class="form-group">
-				<label for="lname"><span class="field-name">Nom de famille</span> <strong>(obligatoire)</strong></label>
+				<label for="lname" class="required"><span class="field-name">Nom de famille</span> <strong class="required">(obligatoire)</strong></label>
 				<input class="form-control" id="lname" name="lname" type="text" required="required" pattern=".{2,}" data-rule-minlength="2" />
 			</div>
 			<div class="form-group">
-				<label for="tel"><span class="field-name">Numéro de téléphone</span> (999-999-9999) <strong>(obligatoire)</strong></label>
+				<label for="tel" class="required"><span class="field-name">Numéro de téléphone</span> (999-999-9999) <strong class="required">(obligatoire)</strong></label>
 				<input class="form-control" id="tel" name="tel" type="tel" required="required" data-rule-phoneUS="true" />
 			</div>
 			<div class="form-group">
@@ -83,7 +83,7 @@
 		</fieldset>
 
 		<fieldset>
-			<legend><span class="field-name">Animal favori</span> (sélectionner au moins une des options ci-dessous)</legend>
+			<legend class="required"><span class="field-name">Animal favori</span> <strong class="required">(obligatoire)</strong></legend>
 			<div class="checkbox">
 				<label for="animal1"><input type="checkbox" name="animal" value="1" id="animal1" required="required" />&#160;&#160;Chien</label>
 			</div>
@@ -99,9 +99,9 @@
 		</fieldset>
 
 		<fieldset>
-			<legend><span class="field-name">Statut de citoyen</span></legend>
+			<legend class="required"><span class="field-name">Statut de citoyen</span> <strong class="required">(obligatoire)</strong></legend>
 			<div class="radio">
-				<label for="status1"><input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Citoyen canadien</label>
+				<label for="status1" class="required"><input type="radio" name="status" value="1" id="status1" required="required" />&#160;&#160;Citoyen canadien</label>
 			</div>
 			<div class="radio">
 				<label for="status2"><input type="radio" name="status" value="2" id="status2" />&#160;&#160;Résident permanent</label>