I'm using materialize with a node backend and js front end. I'm trying to submit a form. I have the following:
<body>
<div class="container">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-content">
<span class="card-title">Form Example</span>
<div class="input-field">
<input type="text" id="zip" name="zip" class="validate" pattern="\d{5}" title="Please enter a 5-digit zip code">
<label for="zip">Zip Code</label>
</div>
<div class="input-field">
<input type="number" id="area" name="area" class="validate" pattern="^(2|3|4|5|6|7|8|9|10)$" title="Please enter a valid value (2, 3, 4, 5, 6, 7, 8, 9, or 10)">
<label for="area">Area (2, 3, 4, 5, 6, 7, 8, 9, or 10)</label>
</div>
</div>
<div class="card-action">
<a class="waves-effect waves-light btn" id="submitButton">Submit</a>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<div id="hot-container" class="mt-4">
<!-- Handsontable grid will be displayed here -->
</div>
<script>
// Function to validate the form
// Function to be called when the button is clicked
function handleSubmitButtonClick() {
// Get the values of the input fields
const zipValue = document.getElementById('zip').value;
const areaValue = document.getElementById('area').value;
if (zipValue) {
}
// Do something with the values, e.g., display them
alert(`Zip Code: ${zipValue}, Area: ${areaValue}`);
}
// Add a click event listener to the button
document.getElementById('submitButton').addEventListener('click', handleSubmitButtonClick);
</script>
</body>
When I enter a non 5 digit number the zip field turns red. The validation is working for this field. However when I enter a number not in the 2-10 range for area there is no effect. What am I doing wrong?