Cannot read properties of null (reading 'value') error occurs when trying to validate the-CodePudding

I am getting an error when trying to check if an input field is empty or not. I tried the function with First Name input Field but not working.

I am trying to check if the First Name input field is empty the input border should turn red if not the border should stay the same.

HERE IS MY CODE

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exercise 2</title>
    <script type="text/javascript">
        function validateField(fieldID){
            check = document.getElementById("fieldID");
            if(check.value.length == 0){
                check.style.borderColor ="red";
            }
            
        }
    </script>
</head>
<body>
    <h1>Flight Reservation</h1>
    <form method="POST" action="">
        <label for="userFirstName">First Name:</label><br>
        <input type="text" name="userName" id="userFirstName" onblur="validateField(userFirstName);">
        <br>
        <label for="userLastName">Last Name:</label><br>
        <input type="text" name="userLast"id="userLastName">

        <br>
        <label>class:</label>
        <label for="businessRadio">Business</label>
        <input type="radio" name="ticketType" id="businessRadio">
        <label for="economyRadio">Economy</label>
        <input type="radio" name="ticketType" id="economyRadio">
        <br>
        <label for="wheelchair">Wheelchair</label>
        <input type="checkbox" name="wheelchair" id="wheelchair">
        <br>

        <label for="passengers">Passengers:</label>
        <input type="number" name="passengers" id="Passengers">
        <br>

        <input type="submit" name="Send" >
        <input type="reset" name="Cancel">
    </form>
    
</body>
</html>

CodePudding user response：

You are passing fieldId and then trying to access with "" which actually converts the fieldId to a string. I have fixed the issue, please check the code below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Exercise 2</title>
    <script type="text/javascript">
        function validateField(fieldID){
            check = document.getElementById(fieldID);
            if(check.value.length == 0){
                check.style.borderColor ="red";
            }
        }
    </script>
</head>
<body>
    <h1>Flight Reservation</h1>
    <form method="POST" action="">
        <label for="userFirstName">First Name:</label><br>
        <input type="text" name="userName" id="userFirstName" onblur="validateField('userFirstName');">
        <br>
        <label for="userLastName">Last Name:</label><br>
        <input type="text" name="userLast"id="userLastName">
        <br>
        <label>class:</label>
        <label for="businessRadio">Business</label>
        <input type="radio" name="ticketType" id="businessRadio">
        <label for="economyRadio">Economy</label>
        <input type="radio" name="ticketType" id="economyRadio">
        <br>
        <label for="wheelchair">Wheelchair</label>
        <input type="checkbox" name="wheelchair" id="wheelchair">
        <br>
        <label for="passengers">Passengers:</label>
        <input type="number" name="passengers" id="Passengers">
        <br>
        <input type="submit" name="Send" >
        <input type="reset" name="Cancel">
    </form>
</body>
</html>

CodePudding user response：

The error occurs when you are trying to get check.value.length when check === null. So this sentences it's returning null value:

check = document.getElementById("fieldID");

Try to change that line to:

check = document.getElementById(fieldID);

Because you are writting a literal string, not using the variable.

CodePudding user response：

There are two problems with the above code:

1: change below line of code

check = document.getElementById("fieldID");

check = document.getElementById(fieldID);

2: use string literals to pass id of the field to funtion called onblur

onblur="validateField(userFirstName);"

replace above line with

onblur="validateField('userFirstName');"