Input Validation Number With Display Another Block

I've got the input field, need to check the number only, if value of input is number - another div .hidden should display: block; Also I've got multiple eventlistener on four bloc

Solution 1:

Most browsers support type="number", can also have specified ranges with the min and max attributes, and can use the step attribute to accept only certain numbers (for example whole numbers).

<input type="number" min="0" max="50" step="1" />

On submit of the form, you'll still want to verify of course. IsNan() is useful for filtering out some inputs. Comparing against a regex like new RegExp('^[0-9]+$'); is a safe bet.

As for:

if it possible combine this event with the form input event.

I don't quite know what you're asking. If you are asking how to validate on both onclick and onsubmit events, just create a function for the validation, like validateInput() and call it for onclick and onsubmit.

element.onclick = function() {
  if (isValidInput(inputValue)) {  
    // More code here
  }
}

form.onsubmit = function() {
  if (isValidInput(inputValue)) {  
    // More code here
  }
}

function isValidInput(inputValue) {
  // Check that input is valid
  // Return true / false
}

Solution 2:

It's working for me now with keyup input event.

(function() {
    var amount_list = document.querySelectorAll('.form-row .donate'); //node-list
    var amount_array = [].slice.call(document.querySelectorAll(".form-row .donate")); //node-list to array
    var donerForm = document.getElementById('hidden');
    var inputDonateField = document.getElementById('donate-price');
    var inputNumber = /^[0-9]+$/;


    var onClickFormVisible = function() {
        donerForm.style.display = "block";
    };
    var onInputTypeNumber = function() {
        if (inputNumber.test(inputDonateField.value)) {
            donerForm.style.display = "block";
        } else {
            return false;
        }
    };
    //onclick event for each amount images
    var amoutn_array = amount_array.map(function(e) {
        return e.addEventListener('click', onClickFormVisible);
    });
    //input event only if value === number
    inputDonateField.addEventListener("keyup", onInputTypeNumber);

})();

.form-row{display:flex; margin:2rem;}
.donate{
background: #007DBD;
  width: 75px;
  height:50px;
  padding: 1rem;
  border: 1px solid black;
 
}
#hidden{
display:none; 
  width: 100px;
  height:150px;
  background: gray;
  color: black;
  text-align:center;
  padding: 2rem;
}

<div class="form-row">
  <label>Label</label>
  <div class="donate">50kr</div>
  <div class="donate">100kr</div>
  <div class="donate">200kr</div>
  <div class="donate">500kr</div>
</div>
<div class="form-row">
  <div class="form-col doner-price">
    <label for="donate-price">
      only number
      <input type="text" id="donate-price" name="name" value="">
    </label>
  </div>
</div>

<div id="hidden">Only if Input value === to number.You are see this block;</div>