-2

I want to check a integer field value in a node add/edit form, if the value is greater than 10, I need display a JS confirm dialog "Are you sure your *** is greater than 10?", if user click on "Yes", the form validation passes, if "No", the node add form displays as it is and wait the use to edit.

How can I achieve this?

1 Answer 1

1

This solution is pure javascript, but is NOT based on hook_node_validate, is based on event KEY_UP, its different and may be a better one, since it diplays or hides span html error on edit form and not on form validate, mutch more user friendly.

This JS validates one content type, you have to change machine name in querySelector, and it validates all numeric fields (integer or decimal, with different RegExp) and one field to not contain any commas, ofcourse you have to adapt your code.

It builds a <span> below each field that finds in querySelectorAll(your-type-field) and hides or display span text adding or removing a class display:none. take a close look on RegExp settings, this does the magic.

<span> added is <HTML>, so you can add your select box in $span.textContent

my site is D7, not shure if works on D8, hope it helps.

enter image description here

RegExp

css

.none {display: none;}
.form-error {
  color: red;
  transition: all 1000ms ease;
}

javascript

  /*strict */
const d = document;

function validar_campos(){
  const $form = d.querySelector("#poliza-node-form");

  if($form) {

    const $inputsInteger = d.querySelectorAll(".field-type-number-integer");
    const $inputsDecimal = d.querySelectorAll(".field-type-number-decimal");
    // const $inputsTitle = d.querySelectorAll(".form-item-title");
    // const $inputsText = d.querySelectorAll(".field-type-text");
    const $formMarcaComercial = d.querySelector("#edit-field-poliza-marca-comercial");

      // create span integer fields
      $inputsInteger.forEach((input) => {
        const $span = d.createElement("span");
        $span.id = 'span-' + input.id + '-und-0-value';
        $span.textContent = "Solo acepta numeros enteros, sin signos ni comas";
        $span.classList.add("form-error", "none");
        input.insertAdjacentElement("afterend", $span);
        $span.setAttribute('tipo', 'integer');
      });

      // create span decimal fields
      $inputsDecimal.forEach((input) => {
        const $span = d.createElement("span");
        $span.id = 'span-' + input.id + '-und-0-value';
        $span.textContent = "Solo acepta numeros enteros o decimales, sin signos ni comas";
        $span.classList.add("form-error", "none");
        input.insertAdjacentElement("afterend", $span);
        $span.setAttribute('tipo', 'decimal');
      });

      // create span marca comercial field
      const $spanMarca = d.createElement("span");
      $spanMarca.id = 'span-marca';
      $spanMarca.textContent = "NO acepta comas, eliminalas";
      $spanMarca.classList.add("form-error", "none");
      $formMarcaComercial.insertAdjacentElement("afterend", $spanMarca);
      $spanMarca.setAttribute('tipo', 'marcaComercial');

      //event listener
      d.addEventListener("keyup", e=> {
        let $currentSpan;
        let $input = e.target;
        let $key = $input.value;
        let spanId = 'span-' + e.target.id;


          // *****************  MARCA COMERCIAL **************

          // verificar campo poliza marca comercial
          if(spanId == 'span-edit-field-poliza-marca-comercial-und'){
            let reText = new RegExp("[,]+");
              $currentSpan = d.getElementById('span-marca');
              // display error, remove class none
              if($currentSpan && $key !== "") {
                return reText.exec($key)
                ? $currentSpan.classList.remove("none")
                : $currentSpan.classList.add("none");
              }
          } // fin es campo marca marcaComercial

        // *****************  CAMPO NUMERICO **************

        let reInt = new RegExp("^[+-]?\\d+$");
        let reDec = new RegExp("^[+-]?[0-9]+(?:\\.[0-9]+)?$");

        $currentSpan = d.getElementById(spanId);

        // verificar que el span lo encuentre, no funciona en field collection
        if($currentSpan){
          tipo = $currentSpan.getAttribute('tipo');

          if(tipo == 'integer' || tipo == 'decimal') {

              // verificar campo INTEGER
              if(tipo == 'integer' && $key !== "") {
                return !reInt.exec($key)
                ? $currentSpan.classList.remove("none")
                : $currentSpan.classList.add("none");
              }

              // verificar campo DECIMAL
              if(tipo == 'decimal') {

                // validate run validate, starts to validate all
                let validate = 1;
                keyPressed = e.which; // 110 y 190 : decimal point
                if(keyPressed == 110 || keyPressed == 190) {
                  validate = 0; //a point, avoid run validate
                }
                  //run validate decimal
                  if(validate === 1 && $key !== "") {
                    return !reDec.exec($key)
                    ? $currentSpan.classList.remove("none")
                    : $currentSpan.classList.add("none");
                  } // fin run validacion

              } // fin campo decimal

              } // fin campo es campoEsNumerico
        } // fin if cuurent span, field colection not working

    }); // fin addEventListener

  } //fin if form

} // fin validar campos

// run functions on dom load
d.addEventListener("DOMContentLoaded", (e) => {
   validar_campos();
});

RegExp javascript

Not the answer you're looking for? Browse other questions tagged or ask your own question.