JS conditional validate form

using variables

by Rich Costello

HTML

<p>Distance: <input type="text" id="distance"/> miles</p>
	<p>Time: <input type="text" id="hours"/> : <input type="text" id="minutes"/> : <input type="text" id="seconds"/></p>
	<p><button id="calculate_btn">Calculate Pace</button></p>
	<p id="pace"/>

JavaScript

var distanceInput=document.getElementById("distance"),
    hoursInput=document.getElementById("hours"),
    minutesInput=document.getElementById("minutes"),
    secondsInput=document.getElementById("seconds"),
    calculateBtn=document.getElementById("calculate_btn"),
    paceText=document.getElementById("pace");

    calculateBtn.addEventListener("click", function(){
      var miles=parseFloat(distanceInput.value),
          hours=parseFloat(hoursInput.value),
          minutes=parseFloat(minutesInput.value),
          seconds=parseFloat(secondsInput.value);
      
      //added by Kevin
      var milesOk = validateInput(miles, distanceInput),
          hoursOk = validateInput(hours, hoursInput),
          minutesOk = validateInput(minutes, minutesInput),
          secondsOk = validateInput(seconds, secondsInput);
      
      function validateInput(value, input) {
          if(isNaN(value)){
              input.style.borderColor="red";
              return false;
          } else {
              input.style.borderColor="initial";
              return true;
          }
      }
      
      //if any of the validation checks failed...
      if (miles === 0 || !milesOk || !hoursOk || !minutesOk || !secondsOk) {
        //exit the click handler, and don't let the code below run
        return;
       }


      var totalMinutes=hours*60 + minutes + seconds/60,
           pace=totalMinutes/miles,
           paceMinutes=Math.floor(pace),
           paceSeconds=Math.round((pace-paceMinutes)*60);

      if(paceSeconds<10){
        paceSeconds="0"+paceSeconds;
      };

      paceText.textContent="You need to run "+paceMinutes+":"+paceSeconds+" minutes per mile";
    });