Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Note
iconfalse

The steps described in this section require basic HTML and Javascript experience. Please contact STR for assistance if necessary.

Table of Contents
maxLevel3
minLevel3

For example, you might want to collect details of the user's company and role:

Your The additional data that is submitted by users registering for an account will be stored in the REG_EXTRA table in the SuperADMIN catalogue (this is either stored in an H2 database or another RDBMS if you have configured this). This table has three columns:

REG_ID
The ID of the registered user. Each registered user will also have a record in the SELF_REG table, and this ID can be used to link the additional information to a registered user.
KEY
A key that identifies which field in the form this record relates to. You set this when you add the fields to the form.
VALUE
The value entered by the user.

For example:

Image Modified

Table of Contents
maxLevel3
minLevel3

Step 1 - Add your Fields to the Form

...

If you have added multiple fields, separate them with a comma. For example:

Code Block
languagejs
            var getSignUpFormData = function () {
                return {
                    "name": $name.val().length === 0 ? $email.val() : $name.val(),
                    "extras": {  "Company": $("#userRegistration-company").val(), "Position": $("#userRegistration-position").val() }
                };
            };

...

Any modern web browser (HTML 5 compliant) will prevent the form from being submitted until a value is entered for this field. 

Image Modified

One drawback of this option is that any messages displayed are controlled by the browser (so they will differ depending on the end user's browser and you cannot change the message content or styling).

...

  1. Add <div id="<field_id>-error" class="user-form-field-error">&#160;</div> before the closing <div> of the form field (replace <field_id> with the ID you used for the form field). This will be used to display your custom validation error message (if any):

    Code Block
    languagexml
                
    <div class="user-form-inputContainer">
                    <input type="text"
                           id="userRegistration-company"
                           placeholder="#{labels['register.signUpForm.company.placeholder']}"/>
                    <h:outputLabel for="userRegistration-company" value="#{labels['register.signUpForm.company.label']}" />
                    
    <div id="userRegistration-company-error" class="user-form-field-error">&#160;</div>
                </div>
  2. In the <script> ... </script> section at the top of the file, add a new custom validator within the $(document).ready() function 

    For example, the following Javascript validates that the company name entered by the user is at least 5 characters long:

    Code Block
    languagejs
    var checkCompanyAndShowError = function () {
    	var $company = $("#userRegistration-company");
    	var $companyError = $("#userRegistration-company-error");
    	var isCompanyValid = $company.val().length > 5;
    
    	if ($company.val().length <= 5) {
    		userRegistration.showFieldError($company, $companyError, "#{labels['register.signUpForm.error.company']}");
    	} else {
    		userRegistration.hideFieldError($company, $companyError);
    	}
    
    	return isCompanyValid;
    };
  3. Add any new properties to the common_labels.properties file. In this example, the error message itself uses the property register.signUpForm.error.company:

    Code Block
    register.signUpForm.error.company=Please enter at least 5 characters
  4. Locate the form validator section:

    Code Block
    languagejs
    var formValidator = function () {
        return window.userRegistration.checkEmailAndShowError();
    };

    Update the validation code to check your new validation function in addition to the existing check that they have entered an email. For example:

    Code Block
    languagejs
    var formValidator = function () {
                    
        var isValidEmail= window.userRegistration.checkEmailAndShowError();
        var isValidCompany = checkCompanyAndShowError();
               
        return isValidEmail && isValidCompany;
    
    };

    For example:

    Image Modified
Note
iconfalse

You will need to restart Tomcat or the SuperWEB2 service to apply any changes you make to the common_labels.properties file.