show error message returned by live validation

wcs/qommon/static/js/qommon.forms.js

@@ -812,7 +812,7 @@ const LiveValidation = (function(){
           break
         }
       }
-      return errorType
+      return [errorType, json.msg]
     }
   }
 
@@ -836,29 +836,34 @@ const LiveValidation = (function(){
     async toggleStatus(field) {
         if (excludedField(field)) return
         const attrError = hasAttrError(field);
-        const serverError = this.widget.dataset.supportsLiveValidation
-          ? await hasServerError(this.name, field, field.form, this.checkUrl)
-          : false
-        const error = attrError ? attrError : serverError
-        // XXX: mais ici on aurait donc attrError qui serait une chaine de la
-        // forme missingValue (en cas de JS), et serverError qui serait un vrai
-        // texte.
-        if (error) {
-          this.showError(field, error)
-        } else {
-          this.removeError(field)
+        if(attrError) {
+          this.showError(field, attrError)
+        }
+        else {
+          const serverError = this.widget.dataset.supportsLiveValidation
+            ? await hasServerError(this.name, field, field.form, this.checkUrl)
+            : false
+          if (serverError) {
+            const [error, overrideMsg] = serverError
+            this.showError(field, error, overrideMsg)
+          }
+          else {
+            this.removeError(field)
+          }
         }
     }
 
-    showError(field, error) {
-      if (this.hasError === error) return
+    showError(field, error, overrideMsg) {
       this.widget.classList.add(this.errorClass)
-      // XXX: et ici on se trouve alors à chercher un élément sur base de
-      // 'error' qui ne correspond pas (c'est le message d'erreur, pas du
-      // texte), et dans ce cas le taf à faire est d'afficher ce message,
-      // pas celui qui serait dans un élément de la page.
       const errorElMessage = document.getElementById(`error_${this.name}_${error}`).innerHTML
       this.errorEl.innerHTML = errorElMessage
+      if(overrideMsg) {
+        const errorMessageContainer = this.errorEl.querySelector(`#error_${this.name}_${error}_message`)
+        errorMessageContainer.innerHTML = overrideMsg
+        // ou, si on on est sûr que errorElMessage ne contient qu'un p qui contient le message d'erreur :
+        // this.errorEl.children[0].innerHTML = overrideMsg
+        // ce qui permet d'enlever le id="error_${this.name}_${error}_message" dans widget.html : à ta guise
+      }
       this.widget.appendChild(this.errorEl)
       field.setAttribute("aria-invalid", "true")
       field.setAttribute("aria-describedby", this.errorEl.id)

wcs/qommon/templates/qommon/forms/widget.html

@@ -53,7 +53,7 @@
   {% if widget.supports_live_validation and not widget.readonly %}
     {% block widget-error-templates %}
       {% for error_message in widget.get_error_messages %}
-        <template id="error_{{ widget.get_name_for_id }}_{{ error_message.camel_code }}"><p>{{ error_message.message }}</p></template>
+        <template id="error_{{ widget.get_name_for_id }}_{{ error_message.camel_code }}"><p id="error_{{ widget.get_name_for_id }}_{{ error_message.camel_code }}_message">{{ error_message.message }}</p></template>
       {% endfor %}
     {% endblock %}
   {% endif %}