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.

        Activity

        Hide
        medgar Malcolm Edgar added a comment -

        Hi Noaki,

        I am supportive of this, ideally more complex JS validation would be provided.

        The example looks good, and follows the existing design pattern from what I can see.

        The only issue is timing, I would like to get the 1.0 release out mid August, do you think you can get your changes in within the next few weeks.

        regards Malcolm Edgar

        Show
        medgar Malcolm Edgar added a comment - Hi Noaki, I am supportive of this, ideally more complex JS validation would be provided. The example looks good, and follows the existing design pattern from what I can see. The only issue is timing, I would like to get the 1.0 release out mid August, do you think you can get your changes in within the next few weeks. regards Malcolm Edgar
        Hide
        takezoe Naoki Takezoe added a comment -

        Hi Malcolm,

        I think it would be possible to complete only core components.
        Already I have many codes which wait for committing about this.

        But it might be difficult to complete all extension components.

        Show
        takezoe Naoki Takezoe added a comment - Hi Malcolm, I think it would be possible to complete only core components. Already I have many codes which wait for committing about this. But it might be difficult to complete all extension components.
        Hide
        takezoe Naoki Takezoe added a comment -

        I've completed to implement JavaScript validation.

        However I couldn't support NumberField and DateField yet
        because they use complex Java APIs such as DateFormat/NumberFormat.
        I don't have a good idea to make them in JavaScript.

        I wouldn't be able to make them by the Click 1.0 release.
        I wish to make them in the future release.

        Show
        takezoe Naoki Takezoe added a comment - I've completed to implement JavaScript validation. However I couldn't support NumberField and DateField yet because they use complex Java APIs such as DateFormat/NumberFormat. I don't have a good idea to make them in JavaScript. I wouldn't be able to make them by the Click 1.0 release. I wish to make them in the future release.

          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:

              Development