Why Are My Errors Not Populating? (HTML/JS Validation Form)

NiceBench 0
Viewed 51

Attempting to make a Validation Form for my website, however I am running into a couple of issues. The main one being that is does not look like my validation check is working. If invalid fields are inputted it routes to the confirmation page upon submit. Also does not look like my alert is working either. Any feedback would be much appreciated!

HTML

<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script>
    function printerError(elemId, hinstMsg){
        document.getElementById(elemId).innerHTML = hinstMsg;
    }
    
    function validateForm(){
        var name = document.contactForm.name.value;
        var email = document.contactForm.email.value;
        var mobile = document.contactForm.mobile.value;
        var address = document.contactForm.address.value;
        var birth = document.contactForm.birth.value;    
    
    
    var nameErr = emailErr = mobileErr = addressErr = birthErr = true;
    
    if(name == "") {
        printError("nameErr", "Please enter your name");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(name) === false) {
            printError("nameErr", "Please enter a valid name");
        } else {
            printError("nameErr", "");
            nameErr = false;
        }
    }
    
    if(email == "") {
        printError("emailErr", "Please enter your email address");
    } else {
        // Regular expression for basic email validation
        var regex = /^\S+@\S+\.\S+$/;
        if(regex.test(email) === false) {
            printError("emailErr", "Please enter a valid email address");
        } else{
            printError("emailErr", "");
            emailErr = false;
        }
    }
    
    if(mobile == "") {
        printError("mobileErr", "Please enter your mobile number");
    } else {
        var regex = /^[1-9]\d{9}$/;
        if(regex.test(mobile) === false) {
            printError("mobileErr", "Please enter a valid 10 digit mobile number");
        } else{
            printError("mobileErr", "");
            mobileErr = false;
        }
    }
    
    if(address == "") {
        printError("addressErr", "Please enter your address");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(address) === false) {
            printError("addresasErr", "Please enter a valid name");
        } else {
            printError("addressErr", "");
            addressErr = false;
        }
    }
    
    if(birth == "") {
        printError("birthErr", "Please enter your birthday");
    } else {
        var regex = /^[a-zA-Z\s]+$/;                
        if(regex.test(birth) === false) {
            printError("birthErr", "Please enter a valid birthday");
        } else {
            printError("birthErr", "");
            birthErr = false;
        }
    }
    
    if((nameErr || emailErr || mobileErr || addressErr || birthErr) == true){
        return false;
    } else{
        var dataPreview = "You have entered the following information: \n" +
            "Full Name: " + name + "\n" + 
            "Email Address: " + email + "\n" + 
            "Mobile Number: " + mobile + "\n" + 
            "Address: " + address + "\n" + 
            "Birthday: " + birth + "\n";
        alert(dataPreview);
    }    
}
</script>        
<form name="contactForm" onsubmit="return validateForm()" action="/submit-confirmation" method="post">
<h2>Application Form</h2>
    
    <div class="row">
        <label>Full Name</label>
        <input type="text" name="name">
        <div class="error" id="nameErr"></div>
    </div>
    
    
    <div class="row">
        <label>Email Address</label>
        <input type="text" name="email">
        <div class="error" id="emailErr"></div>
    </div>
    
    
    <div class="row">
        <label>Mobile Number</label>
        <input type="text" name="mobile" maxlength="10">
        <div class="error" id="mobileErr"></div>
    </div>
    
    
    <div class="row">
        <label>Address</label>
        <input type="text" name="address" maxlength="40">
        <div class="error" id="addressErr"></div>
    </div>
    
    
    <div class="row">
        <label>Birth</label>
        <input type="text" name="birth" maxlength="15">
        <div class="error" id="birthErr"></div>
    </div>
    
    
    <div class="row">
        <input type="submit" value="Submit">
    </div>
    </form>
</html>

CSS

    font-size: 16px;
    background: #f9f9f9;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
    text-align: center;
    text-decoration: underline;
}
form {
    width: 300px;
    background: #fff;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}```
javascript css html
1 Answers

The if/then code should be within the validateForm function.

Your function was named printerError but you are calling printError.

You weren't using the label element correctly. It either needs a for attribute that has a value that matches the corresponding form element's id or you need to wrap the element that the label is for within the label element.

See comments inline for more details.

// Get your DOM references just once, not every time a function runs
// Also, get references to the element, not properties of the element
// so that when you want to access a different property, you can use
// the same element reference again instead of rescanning the DOM for it.
const name = document.querySelector("input[name='name']");
const email = document.querySelector("input[name='email']");
const mobile = document.querySelector("input[name='mobile']");
const address = document.querySelector("input[name='address']");
const birth = document.querySelector("input[name='birth']");   

// Don't use inline HTML event attributes, like onXyz. Use the modern API
document.querySelector("form").addEventListener("submit", validateForm);

function printError(elemId, hinstMsg, event){
  // Don't use .innerHTML when you can avoid it as it has security and performance issues
  document.getElementById(elemId).textContent = hinstMsg;
  event.preventDefault();  // Cancels the event when modern .addEventListener was used to set up the handler
}
  
function validateForm(event){
  if(name.value == "") {
    // We'll pass the reference of the current submit event to the printError function
    // so that it can cancel this event from that function and reduce the need for us
    // to repeat that code in every error condition.
    printError("nameErr", "Please enter your name", event);
    return;  // Exit the function
  } else if(/^[a-zA-Z\s]+$/.test(name.value) === false) {
    printError("nameErr", "Please enter a valid name", event);
    return;  // Exit the function
  }
    
  if(email.value == "") {
    printError("emailErr", "Please enter your email address", event);
    return;
  } else if (/^\S+@\S+\.\S+$/.test(email.value) === false) {
    printError("emailErr", "Please enter a valid email address", event);
    return;
  }
    
  if(mobile.value == "") {
    printError("mobileErr", "Please enter your mobile number", event);
    return;
  } else if (/^[1-9]\d{9}$/.test(mobile.value) === false) {
    printError("mobileErr", "Please enter a valid 10 digit mobile number", event);
    return;    
  }

  if(address.value == "") {
    printError("addressErr", "Please enter your address", event);
    return;    
  } else if (/^[a-zA-Z\s]+$/.test(address.value) === false) {
    printError("addresasErr", "Please enter a valid name", event);
    return;    
  }
    
  if(birth.value == "") {
    printError("birthErr", "Please enter your birthday", event);
    return;    
  } else if (/^\d{2}\/\d{2}\/\d{4}$/.test(birth.value) === false) {
    printError("birthErr", "Please enter a valid birthday", event);
    return;    
  }

  // If we've gottent this far, there is no error
  var dataPreview = "You have entered the following information: \n" +
                    "Full Name: " + name.value + "\n" + 
                    "Email Address: " + email.value + "\n" + 
                    "Mobile Number: " + mobile.value + "\n" + 
                    "Address: " + address.value + "\n" + 
                    "Birthday: " + birth.value + "\n";
  alert(dataPreview);
}
body {
    font-size: 16px;
    background: #f9f9f9;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
    text-align: center;
    text-decoration: underline;
}
form {
    width: 300px;
    background: #fff;
    padding: 15px 40px 40px;
    border: 1px solid #ccc;
    margin: 50px auto 0;
    border-radius: 5px;
}
label {
    display: block;
    margin-bottom: 5px
}
label i {
    color: #999;
    font-size: 80%;
}
input, select {
    border: 1px solid #ccc;
    padding: 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 2px;
}
.row {
    padding-bottom: 10px;
}
.form-inline {
    border: 1px solid #ccc;
    padding: 8px 10px 4px;
    border-radius: 2px;
}
.form-inline label, .form-inline input {
    display: inline-block;
    width: auto;
    padding-right: 15px;
}
.error {
    color: red;
    font-size: 90%;
}
input[type="submit"] {
    font-size: 110%;
    font-weight: 100;
    background: #006dcc;
    border-color: #016BC1;
    box-shadow: 0 3px 0 #0165b6;
    color: #fff;
    margin-top: 10px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: #0165b6;
}
<form name="contactForm"  action="/submit-confirmation" method="post">
  <h2>Application Form</h2>
  <div class="row">
    <label>Full Name <input type="text" name="name"></label>
    <div class="error" id="nameErr"></div>
  </div>
  <div class="row">
    <label>Email Address <input type="text" name="email"></label>
    <div class="error" id="emailErr"></div>
  </div>
  <div class="row">
    <label>Mobile Number <input type="text" name="mobile" maxlength="10"></label>
    <div class="error" id="mobileErr"></div>
  </div> 
  <div class="row">
    <label>Address <input type="text" name="address" maxlength="40"></label>
    <div class="error" id="addressErr"></div>
  </div>
  <div class="row">
    <label>Birth <input type="text" name="birth" maxlength="15"></label>
    <div class="error" id="birthErr"></div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
</form>

Scott Marcus0
Related