How to Trigger Validation

Question

How do I force a user to enter a valid time and valid number before pressing the button "Show"?

I have two fields in my html code and I found two good validation scripts in JS. One for time and one to determine if input field has a numeric value.

I can't change anything in the HTML.

function checkTime() {
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  if (time_untilopt.value != '' && !time_untilopt.value.match(re)) {
    alert("Wrong time!");
    return false;
  }
}

function checkRoomNr() {
  var numbers = /^[0-9]+$/;
  if (roomopt.value.match(numbers)) {
    console.log("is number");
  } else {
    console.log("not a number!");
  }
}

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room">
</div>
<button id="show-schedule">Show</button>

Answer 1

function checkTime( val ) {                     //Pass a value
  return /^\d{1,2}:\d{2}([ap]m)?$/.test( val ); //Return a boolean
}

function checkNum( val ) {    //Pass a value
  return /^\d+$/.test( val ); //Return a boolean
}

const time = document.getElementById("time-until"),
      room = document.getElementById("room"),
      show = document.getElementById("show-schedule");

function validateForm () {
  show.disabled = (checkTime( time.value ) && checkNum( room.value )) === false;
}

[time, room].forEach( el => el.addEventListener("input", validateForm) );

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room">
</div>

<!-- MAKE BUTTON DISABLED -->
<button id="show-schedule" disabled>Show</button>

Now you can reuse your functions like checkTime( val ) regardless of the input ID.

Answer 2

If you want the validation to take place as data is being entered into the fields, you should set your functions up to run on the input event of the fields. If you want to wait until the user leaves the field and has made changes to the value of the field, then you can use the change event of the fields.

But, you'll also want the data to be checked when the form that contains the fields is submitted, so you need to set up a submit event handler for the form as well.

The way to connect a function to an event is to register the function as an "event handler" and that is done (using modern standards-based code) with the .addEventListener() method:

// First, get references to the elements you'll want to work with.
// And, use those variable names to reference the elements in your 
// code, not their IDs.
var timeUntil = document.getElementById("time-until");
var room = document.getElementById("room");
var form = document.querySelector("form");

// We'll set up a variable to keep track of whether there are any errors
// and we'll assume that there are not any initially
var valid = true; 

// Set up the event handling functions:
timeUntil.addEventListener("change", checkTime);
room.addEventListener("change", checkRoomNr);
form.addEventListener("submit", validate);

function checkTime(evt){
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  if(timeUntil.value != '' && !timeUntil.value.match(re)) {
    console.log("Wrong time!");
    valid = false; // Indicate an error
  } else {
    valid = true;
  }
}

function checkRoomNr(evt){
  var numbers = /^[0-9]+$/;
  if(!room.value.match(numbers)){
    console.log ("not a number!");
    valid = false; // Indicate an error    
  } else {
    valid = true;
  }
}

// This function is called when the form is submitted
function validate(evt){
  // Invoke the validation functions in case the fields have not been checked yet
  checkTime();
  checkRoomNr();
  if(!valid){
     evt.preventDefault(); // Cancel the form's submission
     console.log("Submission cancelled due to invalid data");
  }
}

<form action="#">
  <div>
    <label for="time-until">Time</label>      
    <input type="text" id="time-until">
  </div>  
  <div>
    <label for="room">Room</label>      
    <input type="text" id="room">
  <div>
  <button id="show-schedule">Show</button>
<form>

Answer 3

This may be a starting point basically you need to add event handlers and wire up time_untiloptand time_untilopt and add disabled to the show button. and listen for changes. There many ways, this is just an idea.

const button = document.getElementById('show-schedule');
const time_untilopt = document.getElementById('time-until');
const roomopt = document.getElementById('room');

function checkTime() {
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  if (time_untilopt.value != '' && !time_untilopt.value.match(re)) {
    alert("Wrong time!");
    return false;
  }
  return true;
}

function checkRoomNr() {
  var numbers = /^[0-9]+$/;
  if (roomopt.value.match(numbers)) {
    console.log("is number");
    return true;
  } else {
    console.log("not a number!");
    return false;
  }
}

function change() {
  button.disabled = !(checkTime() && checkRoomNr());
}

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until" onchange="change()">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room" onchange="change()">
</div>
<button id="show-schedule" disabled="true">Show</button>

Answer 4

Inside both of your functions you'll want to set up your variables (time_untilopt and roomopt) to actually point to your two <input> fields. Then you'll simply want to return true if they pass validation, and return false if they don't.

To trigger these checks, you'll want to set up an onlick attribute for your submission, which is tied in to a third function, which I have named show(). This third function should conditionally check that both of the other functions return true. If they do, all is good, and you can continue with the submission. If they're not good, simply return false in this function as well.

This can be seen in the following:

function checkTime() {
  re = /^\d{1,2}:\d{2}([ap]m)?$/;
  var time_untilopt = document.getElementById('time-until');
  if (time_untilopt.value != '' && !time_untilopt.value.match(re)) {
    return true;
  }
  else {
    console.log("Wrong time!");
    return false;
  }
}

function checkRoomNr() {
  var numbers = /^[0-9]+$/;
  var roomopt = document.getElementById('room');
  if (roomopt.value.match(numbers)) {
    return true;
  } else {
    console.log("The room number is not a number!");
    return false;
  }
}

function show() {
  if (checkTime() && checkRoomNr()) {
    console.log('Both validations passed!');
    return true;
  }
  else {
    return false;
  }
}

<div>
  <label for="time-until">Time</label>
  <input type="text" id="time-until">
</div>
<div>
  <label for="room">Room</label>
  <input type="text" id="room">
</div>
<button id="show-schedule" onclick="show()">Show</button>

Also note that your checkTime() function is actually doing the exact opposite of what you want; if the time is not empty and matches the validation, you want to return true, not false. This has been corrected in the above example.

Hope this helps! :)