Uploaded image for project: 'Click'
  1. Click
  2. CLK-115

Improvement of Client-Side Validation

    Details

    • Type: Improvement
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: core
    • Labels:
      None

      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.

        Attachments

          Activity

            People

            • Assignee:
              takezoe Naoki Takezoe
              Reporter:
              takezoe Naoki Takezoe
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: