JS failing to validate inputs

Question

JS failing to validate inputs

I'm facing an issue with my validation code. It doesn't seem to be working correctly.

The two things I'm trying to validate are:

Check if any textfield is empty
Ensure that the password field has a minimum of 8 characters

If either one of these conditions fails, an error message should be displayed. However, the error message isn't showing up when it should. Here's the snippet:

function validate() {
    if (document.getElementById("name").value == '') {
        document.getElementById("errorMsg").innerHTML = "You have forgotten to enter your name";
    }
    else if (document.getElementById("surname").value == '') {
        document.getElementById("errorMsg").innerHTML = "You have forgotten to enter your surname";
    }
    else if (document.getElementById("email").value == '') {
        document.getElementById("errorMsg").innerHTML = "You have forgotten to enter your email address";
    }
}

* {
margin: 0px;
padding: 0px;
}

#title{
    font: bold 20px Tahoma;
    color: white;
margin: 10px;
text-align: left;
    width: 80%;
}
...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fastloader - Register for a new account</title>
    <link rel="stylesheet" href="register.css">
<script src="register.js"></script>
</head>
<body>
    <div id = "main-container">
<header id = "header">
<h1>Register for a new account<h1>
</header>
    <div id= "control-container">
    <section id ="label-container">
        <p><label>Enter your Name:</label></p>
        <p><label>Enter your Surname:</label></p>
        <p><label>Enter your Email address:</label></p>
        <p><label>Choose a strong Password:</label></p>
    </section>
    
    <status id = "element-container">
        ...
        ... // Rest of the HTML content

javascript html css verification

Answer 1

Answer №1

if(document.getElementById("errorMsg").value !== "Please remember to input your email address") {
    alert("You have forgotten to enter your email address"); 
}

Instead of using ==, consider using !== for comparison
The correct property to access text in an element is .innerText not .value

Answer 2

if(document.getElementById("errorMsg").value !== "Please remember to input your email address") {
    alert("You have forgotten to enter your email address"); 
}

Instead of using ==, consider using !== for comparison
The correct property to access text in an element is .innerText not .value

Answer 3

Answer №2

Here is the solution that worked for me:

function checkInput() {
    if (document.getElementById('name').value.length == 0) {
        alert("Please enter your name");
    } else if (document.getElementById("surname").value.length == 0) {
        alert("Please enter your surname");
    } else if (document.getElementById("email").value.length == 0) {
        alert("Please enter your email address");
    }
}

* {
margin: 0px;
padding: 0px;
}

#title{
    font: bold 20px Tahoma;
    color: white;
margin: 10px;
text-align: left;
    width: 80%;
}

#header{
padding: 80px;
    font: 14px Tahoma;
}

body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;
}

#main_container{
max-width: 1000px;
margin: 10px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#control-container{
display:-webkit-box;
-webkit-box-orient: horizontal;
}

#label-container{
-webkit-box-flex: 1;
margin: 10px;
}

p {
    font: 14px Tahoma;
margin: 20px;
    width: 350px;
    height: 30px;
}

#element-container{
width: 500px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
}

#name{
    font: 14px Tahoma;
margin: 10px;
    width: 350px;
    height: 30px;
}

#surname{
    font: 14px Tahoma;
    margin: 10px;
    width: 350px;
    height: 30px;
}

#email{
    font: 14px Tahoma;
    margin: 10px;
    width: 350px;
    height: 30px;
}

#password{
    font: 14px Tahoma;
    margin: 10px;
    width: 350px;
    height: 30px;
}

input[type="text"]:focus{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
}

input[type="text"]:hover{
    border: 1px solid #999;
}

input[type="text"]:focus:hover{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
}  

input[type="password"]:focus{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
}

input[type="password"]:hover{
    border: 1px solid #999;
    border-radius: 0px;
}

input[type="password"]:focus:hover{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
    border-radius:0;
}  

#register{
    font: 14px Tahoma;
margin: 20px;
    text-align: center;
}

#btnRegister {
    width: 100px;
    height: 30px;
    margin: 20px;
    text-align: center;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fastloader - Register for a new account</title>
    <link rel="stylesheet" href="register.css">
<script src="register.js"></script>
</head>
<body>
    <div id = "main-container">
<header id = "header">
<h1>Register for a new account<h1>
</header>
    <div id= "control-container">
    <section id ="label-container">
        <p><label>Enter your Name:</label></p>
        <p><label>Enter your Surname:</label></p>
        <p><label>Enter your Email address:</label></p>
        <p><label>Choose a strong Password:</label></p>
    </section>
    
    <section id = "element-container">
        <div id = "name_container">            
            <input name="Name" type="text" id="name"/>
        </div>
        <div id = "surname_container">
            <input name="Surname" type="text" id="surname"/>
        </div>
        <div id = "email_container">
            <input name="Email" type="text" id="email" />
        </div>
        <div id = "password_container">
            <input name="Password" type="password" id = "password"/>
        </div>
    </section>
    </div>
        <footer id = "register">
        <div id = "agreement">
            <label>I have read the Terms and Conditions:</label>
            <input name="agree" type="checkbox" id="agree" />
        </div>
            <div id = "error">
            <p><label id = "errorMsg"></label></p>
            </div>
        <div id = "button">
            <input type = "button" 
                   id="btnRegister" 
                   value = "Register" 
                   onclick="checkInput();"/>
        </div>
        </footer>
    </div>
</body>
</html>

Answer 4

Here is the solution that worked for me:

function checkInput() {
    if (document.getElementById('name').value.length == 0) {
        alert("Please enter your name");
    } else if (document.getElementById("surname").value.length == 0) {
        alert("Please enter your surname");
    } else if (document.getElementById("email").value.length == 0) {
        alert("Please enter your email address");
    }
}

* {
margin: 0px;
padding: 0px;
}

#title{
    font: bold 20px Tahoma;
    color: white;
margin: 10px;
text-align: left;
    width: 80%;
}

#header{
padding: 80px;
    font: 14px Tahoma;
}

body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;
}

#main_container{
max-width: 1000px;
margin: 10px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}

#control-container{
display:-webkit-box;
-webkit-box-orient: horizontal;
}

#label-container{
-webkit-box-flex: 1;
margin: 10px;
}

p {
    font: 14px Tahoma;
margin: 20px;
    width: 350px;
    height: 30px;
}

#element-container{
width: 500px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
}

#name{
    font: 14px Tahoma;
margin: 10px;
    width: 350px;
    height: 30px;
}

#surname{
    font: 14px Tahoma;
    margin: 10px;
    width: 350px;
    height: 30px;
}

#email{
    font: 14px Tahoma;
    margin: 10px;
    width: 350px;
    height: 30px;
}

#password{
    font: 14px Tahoma;
    margin: 10px;
    width: 350px;
    height: 30px;
}

input[type="text"]:focus{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
}

input[type="text"]:hover{
    border: 1px solid #999;
}

input[type="text"]:focus:hover{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
}  

input[type="password"]:focus{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
}

input[type="password"]:hover{
    border: 1px solid #999;
    border-radius: 0px;
}

input[type="password"]:focus:hover{
    outline: none;
    box-shadow: 0px 0px 5px #7f0000;
    border:1px solid #b20000;
    border-radius:0;
}  

#register{
    font: 14px Tahoma;
margin: 20px;
    text-align: center;
}

#btnRegister {
    width: 100px;
    height: 30px;
    margin: 20px;
    text-align: center;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fastloader - Register for a new account</title>
    <link rel="stylesheet" href="register.css">
<script src="register.js"></script>
</head>
<body>
    <div id = "main-container">
<header id = "header">
<h1>Register for a new account<h1>
</header>
    <div id= "control-container">
    <section id ="label-container">
        <p><label>Enter your Name:</label></p>
        <p><label>Enter your Surname:</label></p>
        <p><label>Enter your Email address:</label></p>
        <p><label>Choose a strong Password:</label></p>
    </section>
    
    <section id = "element-container">
        <div id = "name_container">            
            <input name="Name" type="text" id="name"/>
        </div>
        <div id = "surname_container">
            <input name="Surname" type="text" id="surname"/>
        </div>
        <div id = "email_container">
            <input name="Email" type="text" id="email" />
        </div>
        <div id = "password_container">
            <input name="Password" type="password" id = "password"/>
        </div>
    </section>
    </div>
        <footer id = "register">
        <div id = "agreement">
            <label>I have read the Terms and Conditions:</label>
            <input name="agree" type="checkbox" id="agree" />
        </div>
            <div id = "error">
            <p><label id = "errorMsg"></label></p>
            </div>
        <div id = "button">
            <input type = "button" 
                   id="btnRegister" 
                   value = "Register" 
                   onclick="checkInput();"/>
        </div>
        </footer>
    </div>
</body>
</html>

JS failing to validate inputs

Answer №1

Answer №2

Similar questions

What is the reason behind the reversal of meaning for the exclamation mark in CSS compared to its usage in C-based languages?

Is it possible to create a Footer with a 100% width in CSS?

Arrange the selection options by price using jQuery

Managing Data Forms in JavaScript to Handle Large Amounts of Information

"Creating Eye-Catching CSS Animation Effects with Dynamic Initial States

issues with adding class to div element

Can you explain the exact purpose of npm install --legacy-peer-deps? When would it be advisable to use this command, and what are some potential scenarios where it

Trouble with Updating InnerHTML

There are errors occurring in the getter I created within the vuex store.js file

The specific characteristics of an item in the programming language Javascript

The scrolling function in CSS is malfunctioning

Error in Next.js: The element type is not valid. Please make sure it is either a string (for built-in components) or a class/function (for composite components) and not undefined

The declaration file for the module 'bootstrap/dist/js/bootstrap' could not be located

Ways to customize a bot's status based on the time of day

Resolve Bootstrap 4 responsive table header alignment glitch

Tips for keeping a Bootstrap div fixed at the top of the viewport

I am keen on eliminating the lower margin of the PIXI application

Encountering undefined JavaScript functions when called from HTML

How can we show a div element when hovering over another element using css-in-js?

The unique and personalized accordion panel is experiencing technical difficulties