Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Error messages are now styled with the anchor style

    1. SmartClient Version: v9.1p_2014-07-23/Pro Deployment (built 2014-07-23)
    2. Build identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0
    3. N/A
    4. N/A
    5. N/A
    6. Code follows

    Navigate to the following link which is the Hands on demo of SmartClient (currently running 10.0p Built 2014-11-15)
    DataBinding --> Validation --> Customized Binding (http://www.smartclient.com/#validationFieldBinding)

    Under the "customBinding.js" tab, add the property "showErrorText : true" to the dynamic form.

    Code:
    isc.DynamicForm.create({
        ID: "boundForm",
        colWidths: [100, 200],
        dataSource: "users",
        useAllDataSourceFields: true,
        showErrorText : true,
        fields: [
            {type:"header", defaultValue:"Registration Form"},
            {name: "password"},
            {name: "password2", title: "Password Again", type: "password", required: true, 
             length: 20, validators: [{
                 type: "matchesField",
                 otherField: "password",
                 errorMessage: "Passwords do not match"
             }]
            },
            {name: "acceptTerms", title: "I accept the terms of use.", type: "checkbox", width:150,
             defaultValue:false,
             validators:[{
                type:"custom",
                condition:"return value == true",
                errorMessage:"You must accept the terms of use to continue"
             }]
            },
            {name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}
        ],
        values : {
            firstName: "Bob",
            email: "bob@.com",
            password: "sekrit",
            password2: "fatfinger"
        }
    });
    Trying out this sample leads to the screenshot "ErrorMessagesAreBlue".
    This problem was also reproduced in SmartClient Version: v9.1p_2014-11-14/Pro Deployment (built 2014-11-14)

    Digging around the code in ISC_Forms.js, we can see that the error messages are now wrapped in an anchor tag.
    Since these are styled blue in my app, error messages are now blue instead of the (previous) black colour.

    SmartClient Version: v9.1p_2014-07-23/Pro Deployment (built 2014-07-23)
    Code:
    	// getErrorMessage - given an error string or array of errors - return it formatted as HTML for
        // display
        getErrorMessage : function (error) {
            return (isc.isAn.Array(error) ? "<UL><LI>" + error.join("</LI><LI>") + "</LI></UL>"
                                          : error);
        },
    SmartClient Version: v9.1p_2014-11-14/Pro Deployment (built 2014-11-14) and beyond...
    Code:
        // getErrorMessage - given an error string or array of errors - return it formatted as HTML for
        // display
        getErrorMessage : function (error) {
            var errorMessageID = this._getErrorMessageID();
            return (isc.isAn.Array(error) ? "<ul id='" + errorMessageID + "'><li>" + error.join("</li><li>") + "</li></ul>"
                                          : "<a id='" + errorMessageID + "'>" + error + "</a>");
        },
    For testing purposes, I replaced "showErrorText : true," with "showInlineErrors : false" and this produced screenshot "ErrorMessagesAreBlueAtTheTop". The error messages are styled blue.

    The errors in my app have to be inline and not at the top of the screen hence showInlineErrors flag must always be true.
    I have been looking for a flag to control the colour/CSS/style of the error messages but have been unsuccessful till now.

    Also, I am not convinced that the error messages should be enclosed in an anchor tag as these are often styled in a manner that do not suit error messages in general.
    Attached Files
    Last edited by Vivek_Gungabissoon; 20 Nov 2014, 07:22. Reason: Deleted an extra "not" word at the end of the post and reformatted last line

    #2
    We've gone ahead and switched the <a> tag to a <span> to avoid the possibility of interacting with custom CSS styling for links. This change will be available in tomorrow's nightly builds, for version 8.3 and up.

    Comment


      #3
      Fix working

      Tested the fix on
      SmartClient Version: v9.1p_2014-11-24/Pro Deployment (built 2014-11-24)
      It's working fine now. Thanks.

      Comment

      Working...
      X