CODEWITHSUNDEEP
javascripthtmlvalidation
Justin Michel
Justin Michel

Reputation: 113

Simple JavaScript validation not working?

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

Upvotes: 0

Views: 95

Answers (2)

Quan Do
Quan Do

Reputation: 141

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

Some suggestions:

  1. The \n in a.innerHTML += "Some string\n" doesn't work. Use "<br />" instead
  2. Different names for different variables please
  3. Use the placeholder attribute instead of value to suggest the user
  4. Use the message variable to hold the error message instead of setting the innerHtml directly because Javascript uses Pass By Value (see reference)
  5. 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>

Upvotes: 2

Bobby Jack
Bobby Jack

Reputation: 16018

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.

Upvotes: 4

Related Questions