lundi 20 avril 2015

Form validation doesn't like me

Second edit: OH MY GODS I'M AN IDIOT!!! I was focusing on the javascript and completely neglected the lack of a "result" item in the html...Thanks to those who helped!

Edit: Thanks so far. I corrected the errors that people pointed out but it still doesn't like me. :( My html is below.

I'm following a tutorial on html.net (lesson 16 on Javascript) and I've written it exactly how it's supposed to be written. I even loaded up the javascript file of the working tutorial page and compared (was the same)...then copied it and pasted it into my file just to be sure and it still doesn't work. If anyone could offer an opinion, that'd be wonderful. Code is below:

<html>

  <head>
    <title>Lesson 16: form validation</title>
    <script type="text/javascript" src="lesson16.js"></script>
  </head>

  <body>
    <h1>Lesson 16: Form validation</h1>
    <form id="myForm" action="#" method="post">
    <fieldset>
      <p><label for="txtName">Name: </label>
         <input type="text" id="txtName" name="txtName" />
      </p>
      <p><label for="txtEmail">Email: </label>
         <input type="text" id="txtEmail" name="txtEmail" />
      </p>
      <p><input type="submit" value="Submit" /></p>
    </fieldset>
    </form>
  </body>

</html>

function init()
{
  var myForm = document.getElementById("myForm");
  myForm.onsubmit = validate;
}

onload = init;

function validate()
{
  var name = document.getElementById("txtName").value;
  var email = document.getElementById("txtEmail").value;
  var isRequiredNameSet = false;
  var isRequiredEmailSet = false;
  var isEmailValid = false;

  var message = "";
  isRequiredNameSet = validateRequired(name);
  isRequiredEmailSet = validateRequired(email);
  isEmailValid = validateEmail(email);

  if (isRequiredNameSet && isRequiredEmailSet && isEmailValid)
  {
    message = "Thank you, you know how to follow instructions...good for you.";
  }
  else if (! isRequiredNameSet)
  {
    message = "Please, enter a name. First thing and you got it wrong...";
    writeMessage(message);
    return false;
  }
  else if (! isRequiredEmailSet)
  {
    message = "Please, enter an email...come on, it's not that hard...";
    writeMessage(message);
    return false;
  }
  else if (! isEmailValid)
  {
    message = "A valid email, numb nuts...with an @ symbol and a .com or whatever...GODS!!";
    writeMessage(message);
    return false;
  }
  alert(message);
}

function validateRequired(input)
{
  var isValid = false;
  if (input.length == 0)
  {
    isValid = false;
  }
  else
  {
    isValid = true;
  }
  return isValid;
}

function validateEmail(email)
{
  var isValid = false;
  if (email.indexOf("@") == -1 || email.indexOf(".") == -1)
  {
    isValid = false;
  }
  else
  {
    isValid = true;
  }
  return isValid;
}

function writeMessage(text)
{
  var paragraph = document.getElementById("result");

  if (paragraph.firstChild)
  {
    paragraph.removeChild(paragraph.firstChild);
  }
  paragraph.appendChild(document.createTextNode(text));
}

Aucun commentaire:

Enregistrer un commentaire