field errors inline

[acarur01]

Run the testcase. Click on Validate - you'll see that since the First Name does not have a validation error, the fields become misaligned. Is there anyway to force this UI to always be aligned regardless of validation showing?

isc.DynamicForm.create({
    ID: "boundForm",
    dataSource: "users",showInlineErrors:true, showErrorText:true,titleOrientation:"top",errorOrientation:"bottom",
    useAllDataSourceFields: true,showErrorIcon:false,
    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", required: true, width: "150"},
        {name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}
    ],
    values : {
        firstName: "Bob",
        email: "bob@.com",
        password: "sekrit",
        password2: "fatfinger"
    }
});

[Isomorphic]

A couple of options:
- set vAlign to "top" for the item - this way it will stick to the top of its containing cell if the row exceeds its height
- modify the errorOrientation (options are top/bottom/left/right)
- turn off showErrorsInline and handle displaying validation errors explicitly through your code.

[acarur01]

I don't see a way to specify the vAlign as a whole - I have to specify it under all the form items?

[Isomorphic]

Currently this is the case, yes.

[acarur01]

Question about the errorMessageWidth property on the form item - the documentation says it is only for when the error message is shown on left or right of the field but I wanted to specify it when the error message is showing at the bottom. Is this possible? If not, where is the width of this coming from? I can see the message wrapping but it still pushes the fields to the right.

Run the sample. Click validate. All the fields on the right side get pushed. I want to maintain the gap in between the fields even when there are errors showing.

isc.DynamicForm.create({
    ID: "boundForm",
    dataSource: "users",
    useAllDataSourceFields: true,showInlineErrors:true, showErrorText:true,titleOrientation:"top",errorOrientation:"bottom",
    fields: [
        {type:"header", defaultValue:"Registration Form"},
        {name: "password"},
        {name: "password2", title: "Password Again", type: "password", required: true, errorMessageWidth:70, 
         length: 20, validators: [{
             type: "matchesField",
             otherField: "password",
             errorMessage: "Passwords do not maaljfaljflajflajflajflajlfjaljfalfatch"
         }]
        },
        {name: "acceptTerms", title: "I accept the terms of use.", type: "checkbox", required: true, width: "150"},
        {name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}
    ],
    values : {
        firstName: "Bob",
        email: "bob@.com",
        password: "sekrit",
        password2: "fatfinger"
    }
});

[acarur01]

anyone have a response?

[Isomorphic]

We don't really follow your description or what the test case is meant to demonstrate.

By design, errorMessageWidth does not apply to bottom-oriented errors.

Running your test case, fields do not move horizontally and we're not sure what is meant by fields being "pushed". A screenshot showing what you see and what you want would help.

[acarur01]

Maybe this testcase will be a little clearer. Before validation, the checkbox is right beside the password field. After validation, the error message is long and it pushes the checkbox to the right.

isc.DynamicForm.create({
    ID: "boundForm",
    dataSource: "users",
    useAllDataSourceFields: true,showInlineErrors:true, showErrorText:true,titleOrientation:"top",errorOrientation:"bottom",
    fields: [
        {type:"header", defaultValue:"Registration Form"},
 {name: "password2", title: "Password Again", type: "password", required: true, errorMessageWidth:70, 
         length: 20, validators: [{
             type: "matchesField",
             otherField: "password",
             errorMessage: "Passwords do not maaljfaljflajflajflajflajlfjaljfalfatch"
         },
        {name: "password"}
       ]
        },
        {name: "acceptTerms", title: "I accept the terms of use.", type: "checkbox", required: true, width: "150"},
        {name: "validateBtn", title: "Validate", type: "button", click: "form.validate()"}
    ],
    values : {
        firstName: "Bob",
        email: "bob@.com",
        password: "sekrit",
        password2: "fatfinger"
    }
});

[Isomorphic]

And your desired behavior is what - clipping the error message?

If you want the layout to remain unchanged by errors, showing the error icon only is the right approach. Otherwise, unwrappable error messages will affect layout, and clipping them is considered a worse option than showing the error icon.

[acarur01]

I don't want to clip it, I want it to wrap as soon as it reaches the textfield's width.

[acarur01]

Nevermind. It is because the string doesn't have spaces that it's not wrapping.

[acarur01]

We are trying to automate these validation messages which are inline - how do we get the locator for them? Seems selenium only gives the locator of the text field itself.

[Isomorphic]

In older builds this would be achievable by executing some JavaScript within your test to determine the current errors being shown by a form item, but we've decided to make a change to support this directly.
As of the next nightly build (3.1d branch), clicking on the inline error text should give you a locator for the error itself (or, technically, for its parent DOM element)
This should allow you to validate that the error message text is present.

Regards
Isomorphic Software

[acarur01]

Thanks - but we are not using 3.1 - we are still in the 8.2p branch. Any chance it can go in there as well?

[Isomorphic]

We've just ported the fix across for you.
It will be present in the next nightly build.