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

It's time to learn how the browser's JavaScript console works. You could have solved the problem yourself in about 3 seconds if you'd looked at the error message. — JJJ
– JJJ, Commented Apr 3, 2016 at 15:03

Bobby Jack · Accepted Answer · 2016-04-03 15:01:23Z

4

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.

answered Apr 3, 2016 at 15:01

Bobby Jack

16.1k15 gold badges70 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quan Do · Accepted Answer · 2016-04-04 09:12:55Z

You gave the same name x for JavaScript variables. I also fixed your form a little.

Some suggestions:

The \n in a.innerHTML += "Some string\n" doesn't work. Use "<br />" instead
Different names for different variables please
Use the placeholder attribute instead of value to suggest the user
Use the message variable to hold the error message instead of setting the innerHtml directly 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>

@JustinMichel does it work now? If yes please mark my answer accepted, thank you. If not, tell me what happened
Unfortunately it is still not working it submits as if there are no errors

Collectives™ on Stack Overflow

Simple JavaScript validation not working?

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related