Approach for input validation?

[mmontone]

I'm thinking about input validation ..
Let's say I would like to validate an input when it changes. I can make a widget for the input and rerender it on change. But I wonder if there's another approach, like setting the :invalid CSS with some javascript code.
Perhaps direct parenscript/javascript is the right approach for this, but I'm asking just in case.
Thanks.

[mmontone]

I'm simply rerendering the input widget on "change" event atm. Works well enough.

[svetlyak40wt]

That is an interesting approach. I'll try to use it in reblocks-ui2/forms!

[mmontone]

I'm using this.

my implementation of a number widget with validation:

(defwidget value-editor ()
  ((value :initarg :value
          :initform nil)
   (css-class :initarg :css-class
              :accessor css-class
              :initform "form-control")
   (update-on-change :initarg :update-on-change
                     :accessor update-on-change
                     :type boolean
                     :initform nil)
   (validator :initarg :validator
              :accessor input-validator
              :initform nil
              :type (or null trivial-types:function-designator)
              :documentation "A function that should return T if the input value is valid; or (values NIL error-message) when not.")
   (validate-on-change :initarg :validate-on-change
                       :initform t
                       :reader validate-on-change
                       :type boolean)
   (validation-error :accessor validation-error
                     :initform nil
                     :type (or null string))))

(value-models:define-slot-accessor value-of value value-editor)

(defwidget integer-editor (value-editor)
  ()
  (:default-initargs
   :value 0))

(defmethod render ((widget integer-editor))
  (flet ((handle-value-change (&key value &allow-other-keys)
           (let ((integer-value (parse-integer value)))
             (when (update-on-change widget)
               (setf (value-of widget) integer-value))
             (when (validate-on-change widget)
               (multiple-value-bind (validp error-message)
                   (funcall (input-validator widget) integer-value)
                 (if validp
                     (when (validation-error widget)
                       (setf (validation-error widget) nil)
                       (update widget))
                     (progn
                       (setf (validation-error widget) error-message)
                       (update widget))))))))
    (with-html ()
      (:input :type "number"
              :class (css-classes (css-class widget)
                                  (when (validation-error widget)
                                    "is-invalid"))
              :name (callback (value)
                      (setf (value-of widget)
                            (parse-integer value)))
              :onchange (when (or (update-on-change widget)
                                  (and (validate-on-change widget)
                                       (input-validator widget)))
                          (make-js-value-action #'handle-value-change))
              :value (princ-to-string (value-of widget)))
      (when (validation-error widget)
        (:div :class "invalid-feedback"
              (validation-error widget))))))

to give you a more precise idea of how I'm doing it.

test:

(preview
 (make-instance 'integer-editor :value
                (value-models:as-value 20)
                                :update-on-change t
                                :validator (clavier:greater-than 20 "Should be greater than 20")
                                :validate-on-change t))

[mmontone]

I've thought of exploring htmx in case it supports updates at HTML attribute level, but I have not done that yet.