Menu
i'm writing an html page that gets a name, an address and a phone number to practice validation. when the javascript function tries to get the length of the value in the inputs i get this error: "Uncaught TypeError: Cannot read property 'length' of null"
i dont know what nodeValue means but i simply want to get the value in the input.
this is the part of the code in the javascript that gives me the error:
function Validate(nameInput, lastNameInput, addressInput, phoneInput)
{
var errorSpan = document.getElementById("errorSpan");
var okSpan = document.getElementById("okSpan");
var nameErrSpan = document.getElementById("nameErrSpan");
var lastNameErrSpan = document.getElementById("lastNameErrSpan");
var addressErrSpan = document.getElementById("addressErrSpan");
var phoneErrSpan = document.getElementById("phoneErrSpan");
var nameLength = nameInput.nodeValue.length;
var lNameLength = lastNameInput.nodeValue.length;
var addressLength = addressIput.nodeValue.length;
var phoneLength = phoneInput.nodeValue.length;
what do i need to change to just get the value in the inputs and measure them?
here is my html code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Validation Form</title>
</head>
<body>
<div>
<span>First name:</span><br />
<input type="text" id="firstName" /> <span id="nameErrSpan" class="nHidden">Name Must Be Between 3 - 10 Letters</span>
<br>
<span>Last name:</span><br />
<input type="text" id="lastName" /> <span id="lastNameErrSpan" class="lnHidden">Last Name Must Be Between 3 - 10 Letters</span>
<br>
<span>Address:</span><br />
<input type="text" id="address" /> <span id="addressErrSpan" class="adHidden">Address Must Be Between 10 - 25 Letters</span>
<br>
<span>Phone number:</span><br />
<input type="text" id="phoneNumber" /> <span id="phoneErrSpan" class="pHidden">Phone Must Be Between 3 - 10 Digits</span>
<br>
<button onclick="Validate(firstName, lastName, address, phoneNumber)">Check</button><br />
<span id="errorSpan" class="hidden">Missing fields</span><br />
<span id="okSpan" class="hidden">All fields are filled</span><br />
<button onclick="reset()">Reset</button><br />
</div>
<link rel="stylesheet" href="registrationForm.css">
<script src="registrationForm.js"></script>
</body>
</html>
267
To get the text entered into an input, you should use .value, not .nodeValue.
var nameLength = nameInput.value.length;
var lNameLength = lastNameInput.value.length;
var addressLength = addressIput.value.length;
var phoneLength = phoneInput.value.length;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
