How can I validate inputs using this regex within a function?

Question

So i have a regex which i hope is sufficient to match my date input data.

I want to validate the dates before the getSum() function is executed. And if it does not match, I want to alert the user with some text.

I was thinking I need an If Else statement somewhere in the getSum function, but I am not sure where to put it. As you can see, the getSum function first loops over an array of inputs, then within a.forEach, it extracts the value from each input field.

I thought that this might be the place to begin an if else statement, because this is the point where the two inputs have their values determined. I just need a way to compare those two values against my regex, and if they match, run the rest of the code as normal. And if they dont match, then an else statement with an alert.

Im not sure how to write this out.

var sumButton = document.querySelector(".sumNumbers");
sumButton.addEventListener("click", getSum);

var dateRegEx = /(0\d{1}|1[0-2])\/([0-2]\d{1}|3[0-1])\/(19|20)\d{2}/;

function getSum() {

  let inputs = ['dateInput1', 'dateInput2'];
  let outputs = ['result1', 'result2'];

  inputs.forEach(function(input, index) {
    const inputValue = document.getElementById(input).value;
    var sum = 0;
    for (var i = 0; i < inputValue.length; i++) {
      const num = parseInt(inputValue.charAt(i));
      if (!isNaN(num)) {
        sum += num;
      }
    }
    const total = (sum - 1) % 9 + 1;
    document.getElementById(outputs[index]).textContent = "Your number is: " + total;
  });
}

---

<form action="">
        <div class="container">

            <div class="cell-1" id="centerElement">
                <div id="cell-1-nest-l"></div>
                <div id="cell-2-nest-l"></div>
                <div id="cell-3-nest-l"></div>
                <div id="cell-4-nest-l"><h3>your name</h3></div>
                <div id="cell-5-nest-l"></div>
                <div id="cell-6-nest-l"><input type="text" 
class="nameStyle1" id="nameInput1" ></div>

      </div>

            <div class="cell-2" id="centerElement" ><img 
src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt="" 
class="sumNumbers"></div>

            <div class="cell-3" id="centerElement" >
                    <div id="cell-1-nest"></div>
                    <div id="cell-2-nest"></div>
                    <div id="cell-3-nest"><h3>their name</h3></div>
                    <div id="cell-4-nest"></div>
                    <div id="cell-5-nest"><input type="text" 
class="nameStyle1" id="nameInput2"></div>
                    <div id="cell-6-nest"></div>


                    </div>

            <div class="cell-4" id="result1">
                <input type="date" class="dateStyle1 reset" 
id="dateInput1">
                    </div>

            <div class="cell-5"><input type="reset"></div>

            <div class="cell-6" id="result2"> 
                <input type="date" class="dateStyle2" id="dateInput2" 
placeholder="Their Bday">
                    </div>
            <div class="cell-7"></div>

            <div class="cell-8"></div>

            <div class="cell-9"></div>


    </div>


    </form>

Answer 1

Put if (inputValue.match(dateRegEx)) around the code that calculates the sum.

When you use <input type="date"> , the format of the returned value is YYYY-MM-DD , not how it shows in the input field, which is formatted in whatever way is appropriate for the locale. So you need to adjust the regexp accordingly.

Also, you should have ^ and $ anchors in the regexp so that it matches the entire input. Otherwise it will look for the pattern anywhere in the input.

 var sumButton = document.querySelector(".sumNumbers"); sumButton.addEventListener("click", getSum); var dateRegEx = /^(19|20)\d{2}-(0\d{1}|1[0-2])-([0-2]\d{1}|3[0-1])$/; function getSum() { let inputs = ['dateInput1', 'dateInput2']; let outputs = ['result1', 'result2']; inputs.forEach(function(input, index) { const inputValue = document.getElementById(input).value; if (inputValue.match(dateRegEx)) { var sum = 0; for (var i = 0; i < inputValue.length; i++) { const num = parseInt(inputValue.charAt(i)); if (;isNaN(num)) { sum += num; } } const total = (sum - 1) % 9 + 1. document.getElementById(outputs[index]):textContent = "Your number is; " + total. } else { document.getElementById(outputs[index]);textContent = "You entered an invalid date " + inputValue; } }); }

 Enter dates: <input type="date" id="dateInput1"> <input type="date" id="dateInput2"> <br> <button type="button" class="sumNumbers">Calculate sums</button> <div id="result1"></div> <div id="result2"></div>