[CLK-115] Improvement of Client-Side Validation

• Type: Improvement
• Status: Closed
• Priority: Minor
• Resolution: Fixed
• Component/s: core
• Assignee: Naoki Takezoe
• Reporter: Naoki Takezoe
• Created: 31/Jul/06 14:11
• Updated: 11/Jun/07 03:18
• Resolved: 11/Jun/07 03:18

Description

The current version of Click provides only required validation,
I wish to make more validation such as length and format in the
client side.

This is an example for TextField.

========
// JavaScript
function validateTextField(id, required, minLength, maxLength, msgs) {
var field = document.getElementById(id);
if (field) {
var value = trim(field.value);
if (required) {
if (value.length == 0)

{ setFieldErrorColor(field); return msgs[0]; }

}
if (minLength > 0) {
if (value.length < minLength)

{ setFieldErrorColor(field); return msgs[1]; }

}
if (maxLength > 0) {
if (value.length > maxLength)

{ setFieldErrorColor(field); return msgs[2]; }

}
setFieldValidColor(field);
return null;
} else

{ return 'Field ' + id + ' not found.'; }

}

========
// TextField
protected final static String VALIDATE_TEXTFIELD_FUNCTION =
"function validate_

{0}() '{'\n"
+ " var msg = validateTextField(\n"
+ " ''{0}

'',

{1}

,

{2}

,

{3}

, [''

{4}

'',''

{5}

'',''

{6}

'']);\n"
+ " if (msg) '{'\n"
+ " return msg + ''|

{0}

'';\n"
+ " '}' else '

{'\n" + " return null;\n" + " '}

'\n"
+ "'}'\n";
...
public String getValidationJavaScript() {
Object[] args = new Object[7];
args[0] = getId();
args[1] = String.valueOf(isRequired());
args[2] = String.valueOf(getMinLength());
args[3] = String.valueOf(getMaxLength());
args[4] = getMessage("field-required-error", getErrorLabel());
args[5] = getMessage("field-minlength-error",
new Object[]

{getErrorLabel(), String.valueOf(getMinLength())}

);
args[6] = getMessage("field-maxlength-error",
new Object[]

{getErrorLabel(), String.valueOf(getMaxLength())}

);
return MessageFormat.format(VALIDATE_TEXTFIELD_FUNCTION, args);
}
========

Some common codes which make JavaScript might have to be
extracted to the utility class.

Anyway, how do you think about this example?
Is it possible to provide full client-side validation?

Regards.