How can I call to HTML DOM Event Object (for example: onclick, onblur, etc..) nested functions?

Question

Good day! Let's assume that I have a group of textfields in my page, each of the textfield has its own validation during onblur, for example the amount textfield, If I remove the focus on it, it will check if it is greater than 100,000.

<input type = "text" id = "amount" placeholder="Amount" onblur="validateAmount()">

function validateAmount(){
  var amount = document.getElementById("amount").value;
  if (amount > 100000){
      document.getElementById("errormessage").innerHTML = "Invalid! Enter a number less than 100,000!"; //Let's just assume that I have a label for the error message
  }
}

Oops! This is just one of the textfields that has a validation, what If I have 5, let's assume that I click the button to process data with 3 problems on my validation, so the data will not be processed because of those errors. In my case I'm going to use onclick event, take a look of this example:

<button onclick = "checkData()"> Apply </button>

function checkData(){
//Here in checkData() method/function, I want to put the validateAmount() function above and other functions of validation during onblur to count and state the number of errors before submitting the data. 
    var numberOfErrors = 0;
    function validateAmount(){
      var amount = document.getElementById("amount").value;
      if (amount > 100000){
          document.getElementById("errormessage").innerHTML = "Invalid! Enter a number less than 100,000!"; //Let's just assume that I have a label for the error message
          numberOfErrors++;
      }
    }
    /* And more validating functions here
    */

    // After validating all the textfields.
    if(numberOfErrors == 0){
    alert("Congrats! You already submitted the loan");
    } else {
    alert("Error! Check your inputs!");
    }
}

So my question is how can I call the function inside the function on HTML DOM events? Is there any possible and easier way to do this? Thank you in advance!

Answer 1

There are many approaches to this, but I recommend using a validation library. Rolling your own is a very risky proposition, and will lead to unmanageable "spaghetti code".

Here are a couple of libraries you can look into.

http://jqueryvalidation.org

https://angularjs.org

Answer 2

You can pass "this" to the event handler, so that it knows which field it's supposed to validate. I'd run all the validation functions again when submitting the form instead of keeping a count, because that can get messy if people correct errors, or add errors to previously correct fields.
I added a dummy validator as an example.

 function checkData(field){ if (!field){ var numberOfErrors = 0; if (!validateAmount()) numberOfErrors++; if (!validateOther()) numberOfErrors++; if (!numberOfErrors){ alert("Congrats! You already submitted the loan"); } else { alert("Error! Check your inputs!"); } } else if (field.id == "amount") validateAmount() else if (field.id == "other") validateOther(); function validateAmount(){ var amount = parseFloat(document.getElementById("amount").value); if (isNaN(amount) || amount > 100000){ document.getElementById("errormessage").innerHTML = "Invalid! Amount must be less than 100,000!"; return(false); } return(true); } function validateOther(){ var other = parseFloat(document.getElementById("other").value); if (isNaN(other) || other > 100){ document.getElementById("errormessage").innerHTML = "Invalid! Other must be less than 100!"; return(false); } return(true); } } 

 <form> <input type = "text" id = "amount" placeholder="Amount" onblur="checkData(this);"> <input type = "text" id = "other" placeholder="Other" onblur="checkData(this);"> <button onclick = "checkData()"> Apply </button> </form> <div id="errormessage"></div>