1

The purpose of the code presented is to establish a range of ages between 15 and 60 years, in a dynamic way at the time, and it works. Now, using the benefits pattern attribute of the input tag of HTML5, I want to know if I get rid of javascript and do this with only regular expression on pattern attribute.

html code:

<body>
  <div class="test">
    <form action="test.html" method="post">
      <table>
        <tbody>
          <tr>
            <th colspan="3">DATE</th>
          </tr>
          <tr>
            <td>
              <input id="YEAR" name="R4" value="" placeholder="YEAR" type="text" required="required" pattern="^(19[4-9]{1}[0-9]{1}|200[1]{1})$">
              <input id="MONTH" name="R6" value="" placeholder="MONTH" type="text" required="required" pattern="^0[1-9]|1[0-2]$">
              <input id="DAY" name="R7" value="" placeholder="DAY" type="text" required="required" pattern="^0[1-9]|1\d|2\d|3[0-1]$">
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <button name="insert" type="button" onclick="dob()">INSERT</button>
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</body>

css code:

@CHARSET "UTF-8";
body {
  margin: 0;
  padding: 0;
  background: #D0D0D5;
  font-family: monospace;
  font-size: 16px;
}

input {
  width: 49px;
  height: 15px;
  font-size: small;
}

button[type="button"] {
  width: 100%;
  height: 25px;
  margin-left: auto;
  margin-right: auto;
}

.test {
  position: absolute;
  width: 200px;
  top: 10px;
  left: 15px;
  border: 1px solid grey;
  border-radius: 6px;
  box-shadow: 3px 3px #383333
}

**javascript code: ** gotten from: Calculate age in JavaScript

function dob() {
  var year = document.getElementById('YEAR').value;
  var month = document.getElementById('MONTH').value;
  var day = document.getElementById('DAY').value;
  var today = new Date();
  var age = today.getFullYear() - year;
  if (today.getMonth() < month || (today.getMonth() == month && today.getDate() < day)) {
    age--;
  }
  alert(age);
}

JSFiddle

Thanks in advance.

JGM
  • 13
  • 1
  • 3
  • 3
    Regular expressions aren't intended to do maths. But even if they could, your date is input via three separate fields, each with its own pattern attribute that doesn't know about the other fields. (And is that CSS really relevant to your question?) – nnnnnn Feb 25 '16 at 00:41
  • 2
    Why in the world do you even *want* to do that? – Jake Haller-Roby Feb 25 '16 at 00:42
  • HTML5 patterns will do validation for input field values, just that. As @nnnnnn stated, you can compute anything with them... – ericbn Feb 25 '16 at 00:43
  • Also, regular expressions only search and match. `pattern` is incapable of doing any modifications based on the search. – Amadan Feb 25 '16 at 00:44
  • 1
    Even if you had a regex that could do it today, you'd need another tomorrow. And yes, that CSS greatly helped me understand the end goal. – numbers1311407 Feb 25 '16 at 00:45

1 Answers1

1

IMHO in this scenario, it makes much more sense to use the number input type instead of text. There is no need to write all that complicated regex to parse the user input in text field.

I would change the DOB fields like below which makes it much more easier.

<input id="YEAR" name="R4" placeholder="YEAR" type="number" required min="1949" max="2016" step="1">
<input id="MONTH" name="R6" placeholder="MONTH" type="number" required min="1" max="12" step="1" >
<input id="DAY" name="R7" placeholder="DAY" type="number" required min="1" max="31" step="1">
TeaCoder
  • 1,958
  • 13
  • 13