Improvements to handling of required hints in customForm.js

productMods/edit/forms/css/customForm.css

@@ -23,6 +23,11 @@
     display: none; /* Hide if Javascript disabled. Javascript will show. */
 }
 
+#content form .existing span.requiredHint, 
+#content form .new span.requiredHint {
+    display: none; /* Hide if Javascript disabled. Javascript will show. */
+}
+
 #content form .existing {
     float: left;
     clear: none;

productMods/edit/forms/js/customForm.js

@@ -80,7 +80,6 @@ var customForm = {
         this.existingOrNew = $('.existingOrNew'); // just the word "or" between existing and add new
 
         this.cancel = this.form.find('.cancel');   
-        this.requiredHints = this.form.find('.requiredHint');        
         
         this.close = this.form.find('.close');
         
@@ -101,7 +100,7 @@ var customForm = {
         
         this.existingOrNew.hide();
         
-        this.addRequiredHints();
+        this.toggleRequiredHints('show', this.addNew); 
     },
     
     initForm: function() {
@@ -115,20 +114,6 @@ var customForm = {
         } 
     },
         
-    addRequiredHints: function() {
-        
-        var requiredHintText = '<span class="requiredHint"> *</span>',
-            labels = this.existing.find('label.required').add(this.addNew.find('label.required'));
-
-        	labels.each(function() {
-        		var el = $(this),
-        			labelText = el.html(), 
-        			newLabelText = labelText + requiredHintText;
-
-                el.html(newLabelText);        		
-        	});       
-    },
-        
     /***** ADD form *****/
 
     // Set up add form on page load, or when returning to initial state from step 2
@@ -164,7 +149,7 @@ var customForm = {
     	}
     	
     	customForm.existing.show();
-        customForm.existing.find('span.requiredHint').hide();
+        customForm.toggleRequiredHints('hide', customForm.existing);
     	customForm.addNewLink.show();
     	customForm.addNew.hide();
     	customForm.entry.hide();    
@@ -205,6 +190,7 @@ var customForm = {
         
         customForm.button.show();
         customForm.or.show();
+        customForm.toggleRequiredHints('show', customForm.existing, customForm.addNew);        
     },
 
     // Most methods below use 'customForm' rather than 'this', because 'this' doesn't reference
@@ -219,6 +205,8 @@ var customForm = {
     		return;
     	}
     	customForm.showSelectExistingFields();
+    	// This hint shows in step 2 but not in step 1
+        customForm.toggleRequiredHints('show', customForm.existing);
         customForm.doButtonForStep2(customForm.defaultButtonText);
         customForm.doCancelForStep2();        
     },
@@ -251,6 +239,7 @@ var customForm = {
     	
     	this.defaultButtonText = 'Save Changes';
     	this.addNewButtonText = 'Create ' + this.secondaryType + ' & Save Changes';
+    	this.toggleRequiredHints('show', this.existing);
     	
         // If there are validation errors on the page, we're returning from 
         // an attempted submission that failed validation, and we need to go
@@ -304,7 +293,7 @@ var customForm = {
     }, 
     
     hideFields: function(el) {
-        // Clear any input, so if we reshow the element the input won't still be there.
+        // Clear any input, so if we re-show the element the input won't still be there.
         customForm.clearFields(el);
         el.hide();
     },
@@ -401,7 +390,6 @@ var customForm = {
     showSelectExistingFields: function() {
     	
     	customForm.existing.show();
-        customForm.existing.find('span.requiredHint').show();
         customForm.addNewLink.hide();
         customForm.addNew.hide();
         customForm.showFieldsForAllViews();
@@ -468,7 +456,25 @@ var customForm = {
 	        }
 	    }  
 	    return view;
+    },
+    
+    toggleRequiredHints: function(action /* elements */) {
+    	
+    	var hints,
+    	    selector = 'span.requiredHint',
+    	    numArgs = arguments.length;
+    	
+    	if (numArgs < 2) {
+    		return;
     	}
+    	hints = arguments[1].find(selector);
+    	for (var i = 2; i < numArgs; i++) { 
+    		hints.add(arguments[i].find(selector));
+    	}
+
+    	action == 'show' ? hints.show() : hints.hide();
+    }
+
 };
 
 $(document).ready(function(){   

productMods/edit/forms/personHasEducationalBackground.jsp

@@ -372,7 +372,7 @@ the type still gets asserted. --%>
      
     <div class="relatedIndividual">
         <div class="existing">
-            <v:input type="select" label="Organization Granting Degree" labelClass="required" id="organizationUri"  /><span class="existingOrNew">or</span>
+            <v:input type="select" label="Organization Granting Degree ${requiredHint}" id="organizationUri"  /><span class="existingOrNew">or</span>
         </div>
     
         <div class="addNewLink">
@@ -383,8 +383,8 @@ the type still gets asserted. --%>
             <a class="close" href="#">cancel</a>
             <h6>Add a New Organization</h6>
 
-            <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" size="30" />
+            <v:input type="text" label="Organization Name ${requiredHint}" id="newOrgName" size="30" />
-            <v:input type="select" label="Select Organization Type" labelClass="required" id="newOrgType" />
+            <v:input type="select" label="Select Organization Type ${requiredHint}" id="newOrgType" />
         </div>   
     </div> 
     

productMods/edit/forms/personHasPositionHistory.jsp

@@ -320,7 +320,7 @@ the type still gets asserted. --%>
 
     <div class="relatedIndividual">
         <div class="existing">
-            <v:input type="select" label="Select Existing Organization" labelClass="required" id="organizationUri"  /><span class="existingOrNew">or</span>
+            <v:input type="select" label="Select Existing Organization ${requiredHint}" id="organizationUri"  /><span class="existingOrNew">or</span>
         </div>
     
         <div class="addNewLink">
@@ -329,8 +329,8 @@ the type still gets asserted. --%>
       
         <div class="new">
             <h6>Add a New Organization</h6>
-            <v:input type="text" label="Organization Name" labelClass="required" id="newOrgName" size="30" />
+            <v:input type="text" label="Organization Name ${requiredHint}" id="newOrgName" size="30" />
-            <v:input type="select" label="Select Organization Type" labelClass="required" id="newOrgType" />
+            <v:input type="select" label="Select Organization Type ${requiredHint}" id="newOrgType" />
         </div>   
     </div>