I'm currently working on form validation, but I'm unsure if I'm overcomplicating things. I have a variable that compares elements and replaces an image with a checkmark for success or an X for failure upon successful validation. The function validateData is supposed to run when the field loses focus. However, the image source doesn't change when testing the first field with numbers to trigger the red X image source change.
function validateData() {
var letters = /^[A-Za-z]+$/;
var image1=document.getElementById("image1");
if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="") {
image1.src="check.png";
} else {
image1.src="redx.png";
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="author" content="Kenneth Dunn" />
<meta name="description" content="" />
<script src="quiz.js"></script>
<link rel="stylesheet" href="quiz.css" type="text/css" />
</head>
<body>
<div id="page">
<div id="logo">
<h1><a href="https://playoverwatch.com">Overwatch</a></h1>
</div>
<div id="content">
<h2>Overwatch Quiz</h2>
<p>
Hi there!
This quiz is dedicated to one of my favorite games, Overwatch!
</p>
<form action="quiz.js" method="post" name="quiz_form">
<p><br>
<input name "first_name" type="text" placeholder="First Name" onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
</p>
<p><br>
<input name="last_name" type="text" placeholder="Last Name" onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
</p>
<p><br>
<input name="email" type="text" placeholder="Email" onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain @ '" onblur="validateData()"/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
</p>
<p><br>
<input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
</p>
<p><br>
<input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
</p>
<br>
<br>
<p>
<h2>Find out which Overwatch character you are most like!</h2>
<p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>
<input type="radio" name="exist" value="1">Male(Human).<br>
<input type="radio" name="exist" value="2">Female(Human).<br>
<input type="radio" name="exist" value="3">An Animal or something crazy.
<p>What is your preferred weapon to take on bad guys and defend yourself?</p>
<input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
<input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
<input type="radio" name="weapon" value="3">An electro gun that shocks enemies into submission.
<p>Which motivations most align with your own?<p>
<input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
<input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
<input type="radio" name="idea" value="3">To protect my friends and those I care about.
<p>What do you look like?</p>
<input type="radio" name="look" value="1">Dark and mysterious black-hooded figure, very edgy, like people in the Matrix.<br>
<input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
<input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can shield my friends from harm.
<br>
<br>
<input type="submit" name="submit" id="submit" value="submit" />
<input type="reset" name="reset" id="reset" value="Reset" />
</p>
</form>
<br>
<br>
<br>
<br>
<div id="footer">
<h2 align="center" >Created by </h2>
</p>
</div>
</div>
</div>
</body>
</html>