CODEWITHSUNDEEP
javascripthtml
username653ue6
username653ue6

Reputation: 31

How to prevent a JavaScript error message displaying when a user has yet to submit data in a form?

How does one prevent a validation error message displaying in a form when a user has yet to submit data? And, how to ensure that the error message only displays if the data has been validated as incorrect?

The data is a birth date, in the format dd/mm/yyyy, validated with a Regular Expression.

function myValidator() {
  var userBirthDate = document.getElementById("dob").value;

  var regexVar = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
  var regexVarTest = regexVar.test(userBirthDate);
  
  var userAge = new Date(userBirthDate.replace(regexVar, "$2-$3-$1"));
  
  var todayDate = (new Date()).getFullYear();
  
  var cutOff19 = new Date();
  cutOff19.setFullYear(todayDate - 19);
  
  var cutOff95 = new Date();
  cutOff95.setFullYear(todayDate - 95);

  var errMsg = document.getElementById("error");
  
  if (!regexVarTest) {
    errMsg.innerHTML = "Enter as dd/mm/yyyy";
  }
  
    else if (userAge > cutOff19) {
      errMsg.innerHTML = "you have to be older than 19";
    }
    
    else if (userAge < cutOff95) {
      errMsg.innerHTML = "you have to be younger than 95";
    }
    
    return userAge;
}

function init() {
  var theForm = document.getElementById("theform");
  theForm.onsubmit = myValidator();

}

window.onload = init;
<p>
  <label for="dob">Birth Date</label>
  <input type="text=" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="([0-9]{2})\/([0-9]{2})\/([0-9]{4})" required="required" />
  <span id="error"></span>
</p>

Upvotes: 0

Views: 59

Answers (1)

user9167318
user9167318

Reputation:

After your var userBirthDate = document.getElementById("dob").value;

Place all DOB validations inside if condition as 

function myValidator() {
  var userBirthDate = document.getElementById("dob").value;
  if (userBirthDate) {
    ...
    validation logic
    ...
  }

So that your validations will be fired only if there is some or the data in input

Ref: How to check empty/undefined/null string in JavaScript?

Upvotes: 1

Related Questions