JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<p>
Hidden buttons (display:none) ar still seen by only-child and only-of-type selectors. The 'ONE' button is aligned to the right of the FLEXBOX container.
</p>

<div class="container">
<form name="frm" id="frm">

<input type="number" step=".01" name="frm-num" id="frm-num" placeholder="number">
<input type="text" data-custval-type="decimal" data-dirty-description="Please enter decimal format 99.999.999,99"  name="frm-decimal-001" id="frm-decimal-001" placeholder="decimal" required>
<input type="text" data-custval-type="decimal" data-dirty-description="Please enter decimal format 99.999.999,99"  name="frm-decimal-002" id="frm-decimal-002" placeholder="decimal" value="1.999,99" required>
<button type="submit" name="submit" id="frm-sub">Submit</button>

</form>
</div>

<div class="container">
<button type="button">ONE</button>
<button type="button" class="hidden">TWO</button>
<button type="button" class="hidden">THREE</button>
</div>

CSS

/*
Test case
*/

.container{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  border: 1px solid grey;
  background-color:lightgray;
  margin:0.5em;
  padding:0.5em;
  
}

.hidden{
  display:none;  
  z-index:2;
}


button:first-of-type + button{
  margin-left:auto;

}


input:invalid{
  border: 1px dashed red;
}

JavaScript

const frm = document.getElementById('frm');
const decimalFormat = new Intl.NumberFormat('nl-NL');


//tested euro decimal formatting: 1.999.999,99 regex on https://www.regextester.com/
// but not working in html validation:
// (^(([€$£]?\s*)?((\d{1,3}(\.\d{3})+)|\d+))(,\d+\s*)?)\s*$|(^(((\d{1,3}(\.\d{3})+)|\d+))(,\d+\s*)?(\s*[$€£]?)\s*$)



// form submit checks
frm.addEventListener("submit", function(evt) {
  evt.preventDefault();
  window.history.back();

  // going over special decimal field type:
  const decimalFields = frm.querySelectorAll('[data-custval-type="decimal"]');

  if (decimalFields.length) {
    decimalFields.forEach(function(elm) {

      debugger;
      let val = elm.value;
      const regex = "(^(([€$£]?\s*)?((\d{1,3}(\.\d{3})+)|\d+))(,\d+\s*)?)\s*$|(^(((\d{1,3}(\.\d{3})+)|\d+))(,\d+\s*)?(\s*[$€£]?)\s*$)";
      let result = new RegExp(regex, 'g').test(val);

      //if regex is not valid...
      if (!result) {
      	  
        console.log(elm.dataset.dirtyDescription, elm.id);
       //  elm.setCustomValidity("Dirty");
      } else {
       // elm.setCustomValidity("");
        console.log('all good', elm.id);
      }

    });

  }

  const data = Object.fromEntries(new FormData(frm).entries());
  console.log(data);

}, true);