Simple JavaScript validation not working?
Question
Not sure why this isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Player 1</title>
<link rel="stylesheet" type="text/css" href="playerOne.css">
</head>
<body>
<div id="heading">
<h>Player 1</h>
</div>
<form name="playerInfo" onsubmit="return validate()" method="post">
<hr>
<fieldset>
<legend>Personal information:</legend>
<label id="inPID">Player ID:</label>
<br>
<input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus >
<br>
<br>
<label id="inFN">First name:</label>
<br>
<input type="text" name="firstname" class="input" id="fname" placeholder="First name" >
<br>
<br>
<label id="inLN">Last name:</label>
<br>
<input type="text" name="lastname" class="input" id="sname" placeholder="Last name" >
<br>
<br>
<label id="inEA">Email address:</label>
<br>
<input type="text" name="email" class="input" id="email" placeholder="Email address">
<br>
<br>
<label id="inPW">Password:</label>
<br>
<input type="password" name="password" class="input" id="pass" >
<br>
<br>
<input type="submit" value="Validate" class="input" id="validate" >
</fieldset>
<hr>
</form>
<div id="error"></div>
<script>
function testVal(){
return false;
}
function validate() {
var message;
var test = true;
message = document.getElementById("error");
message.innerHTML += "";
var x = document.getElementById("id");
if(x.value == ""|| x.value == null||x.value== "Player ID") {
x.style.backgroundColor = "#FF0000";
message.innerHTML += "Player ID is missing\n";
test = false;
}else{
}
var x = document.getElementById("fname");
if(x.value == ""){
x.style.borderColor = "#FF0000";
message.innerHTML += "First name is missing\n";
test = false;
}else{
}
var x = document.getElementById("sname");
if(x.value == "") {
x.style.borderColor ="#FF0000";
message.innerHTML += "Surname is missing\n";
test = false;
}else{
}
var x = document.getElementById("email");
if(x.value == "") {
x.style.borderColor = "#FF0000";
message.innerHTML += "Email is missing\n";
test = false;
}else{
}
var x = document.getElementById("pass");
if(x.value == ""){
x.style.borderColor = "#FF0000";
message.innerHTML += "Password is missing\n";
test = false;
}else{
}
return test;
}
</script>
</body>
So it should change the color of the borders to red if the input is incorrect( or empty), and inform the user in a div. For some reason, the code is always submitting without recognizing the errors. Also I'm a beginner at JavaScript (and html) so if anyone has any input on improving this code it would be appreciated.
EDIT: Apologies. I uploaded the wrong version of the code the testval function was only there to check if the onsubmit was working correctly, and the validate function is now called onsubmit, which is where/when it should be but is not working.
EDIT 2: Thank you for your help on the format and correct tag use. I have edited it as to your recommendations, however the actual validating (function) is still not working, despite the inclusion of quotation marks.
references:
http://www.w3schools.com/js/js_validation.asp
http://www.tutorialspoint.com/javascript/javascript_form_validations.htm
2 answers
solution1
4 2016-04-03 15:01:23
Look at your console errors.
First is a typo in testVal - "retrun" instead of "return" .
Next up, strings need to be quoted so x.style.borderColor = #FF0000; needs to be x.style.borderColor = "#FF0000";
Beyond that, you don't actually seem to be calling validate() in the code provided. Also, look into using the placeholder attribute for input elements, or - possibly more appropriate - the label element, rather than your approach of putting the label inside the value of each input.
solution2
2 ACCPTED 2016-04-03 15:05:04
You gave the same name x for JavaScript variables. I also fixed your form a little.
Some suggestions:
- The
\\nina.innerHTML += "Some string\\n"doesn't work. Use"<br />"instead - Different names for different variables please
- Use the
placeholderattribute instead ofvalueto suggest the user - Use the
messagevariable to hold the error message instead of setting theinnerHtmldirectly because Javascript uses Pass By Value (see reference ) - When you get more acquainted with Javascript, you would want to learn jQuery . It provides a great API for easier time coding as well as make Html traversal, event handling and Ajax much simpler. http://www.w3schools.com/jquery/default.asp is a great place to learn jQuery.
Fixed Javascript and Html:
function validate() { var message = ""; var test = true; var id = document.getElementById("id"); if (id.value == "" || id.value == null) { id.style.backgroundColor = "#FF0000"; message += "Player ID is missing<br />"; test = false; } else { } var fname = document.getElementById("fname"); if (fname.value == "" || fname.value == null) { fname.style.borderColor = "#FF0000"; message += "First name is missing<br />"; test = false; } else { } var sname = document.getElementById("sname"); if (sname.value == "" || sname.value == null) { sname.style.borderColor = "#FF0000"; message += "Surname is missing<br />"; test = false; } else { } var email = document.getElementById("email"); if (email.value == "" || email.value == null) { email.style.borderColor = "#FF0000"; message += "Email is missing<br />"; test = false; } else { } var x = document.getElementById("pass"); if (x.value == "" || x.value == null) { x.style.borderColor = "#FF0000"; message += "Password is missing<br />"; test = false; } else { } if (test == true) { document.alert("OK"); // document.getElementById("frmPlay").submit(); } else { document.getElementById("error").innerHtml = message; } }
<form name="playerInfo" onsubmit="validate()" method="post" id="frmPlay"> <hr> <fieldset> <legend>Personal information:</legend> <label>Player ID:</label> <br> <input type="text" name="playerid" class="input" id="id" placeholder="Player ID" autofocus> <br> <br> <label>First name:</label> <br> <input type="text" name="firstname" class="input" id="fname" placeholder="First name"> <br> <br> <label>Last name:</label> <br> <input type="text" name="lastname" class="input" id="sname" placeholder="Last name"> <br> <br> <label>Email address:</label> <br> <input type="text" name="email" class="input" id="email" placeholder="Email address"> <br> <br> <label>Password:</label> <br> <input type="password" name="password" class="input" id="pass"> <br> <br> <input type="submit" value="Validate" class="input" id="validate"> </fieldset> <hr> </form> <div id="error"></div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.