Trouble implementing validation using java script in html

Question

I am finding it hard to use js in html as i am new to this. I have tried changing around many different things to get it to work but nothing has been successful. Any advice would be greatly appreciated.

I have tried everything from changing the input types, actions, if and else if statements, alert function and many more.

function validation() {
  var name = document.getElementById('Name').value;
  var email = document.getElementById('Email').value;
  var tel = document.getElementById('Telephone').value;
  if (Name == '' || Email == '' || Telephone == '')
    alert('action required')
  return false;
} else if (name.length < 4) {
  alert("action required")
  return false;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="utf-8">
  <link rel="stylesheet" href="css/WebForm.css">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>COM111 | WebForm | B0076234</title>
  <meta name="viewport" content="width = device-width, inital-scale = 1.0">
  <script src="assignment2/ass2script.js"></script>
  <h1 id="h1">Welcome To My WebForm</h1>
  <h2 id="h2"> CV Request</h2>
</head>

<body>
  <!-- form -->
  <form action="" method="post" onsubmit="return validation()">
    <div class="wrap">
      <div class="form1">
        <div class="input-fields">
          <input type="text" class="input" placeholder="Name" id="name">
          <input type="email" class="input" placeholder="Email" id="Email">
          <input type="tel" class="input" placeholder="Telephone" id="Telephone">
          <input type="text" class="input" placeholder="Company" id="Telephone"><br>
          <input type="submit" name="submit" value="Insert now">
          <!--buttons-->
          <label>Short CV
<input type="radio" checked="checked">
    </label> <br>
          <label>Long CV
     <input type="radio">
    </label>
          <!-- messgebox -->
        </div>
        <div class="message">
          <textarea placeholder="Message"></textarea>
          <div class="btn">send</div>
        </div>
      </div>
    </div>
  </form>
  <!--buttons-->
  <div id="eresult"></div>
  <!-- javascript -->
  <script type="text/javascript">
  </script>

</body>

</html>

Your braces don't match, it's getting a syntax error as a result. — Barmar, Apr 09 '19 at 21:07
Didn't you see the syntax error in the JavaScript console? Do you have the console open when you're trying to debug JavaScript? — Barmar, Apr 09 '19 at 21:08
Hi Barmar i am just writing the JavaScript straight into html — JackC, Apr 09 '19 at 21:09
You have other problems: You assign `name`, `email`, and `tel`, but you test `Name`, `Email`, and `Telephone`; variable names are case-sensitive. — Barmar, Apr 09 '19 at 21:12
You have `id="name"` but you use `document.getElementById("Name")`. This is also case-sensitive. — Barmar, Apr 09 '19 at 21:12
@JackC What do you mean by that? You use the console when you're executing the code, it has nothing to do with how you write the code. — Barmar, Apr 09 '19 at 21:14
Sorry that is a silly error same with braces, unfortunately its still not working — JackC, Apr 09 '19 at 21:14
@JackC and what about all the comments talking about the problems with the uppercase versus lowercase id and variable names? Also you say "t's still not working" -> indeed, you haven't fixed the problem with the brace in your question, or at least there is still one. Please edit your question. — Pac0, Apr 10 '19 at 06:09

Barmar · Accepted Answer · 2019-04-09T21:30:39.847

Fix the following problems:

You need braces around the block after if, because it contains multiple statements. See Why is it considered a bad practice to omit curly braces?
Add another brace at the end of the function.
Change id="name" to id="Name", to match the call to document.getElementById('Name').
Fix the variable names in the first if statement to match the variables that were assigned from the input values.

All of these validations can actually be implemented in the HTML itself. You can use the required attribute for inputs that have to be filled in, and minlength="4" on the Name input to require that it be at least 4 characters.

function validation() {
  var name = document.getElementById('Name').value;
  var email = document.getElementById('Email').value;
  var tel = document.getElementById('Telephone').value;
  if (name == '' || email == '' || tel == '') {
    alert('action required')
    return false;
  } else if (name.length < 4) {
    alert("action required")
    return false;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="utf-8">
  <link rel="stylesheet" href="css/WebForm.css">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>COM111 | WebForm | B0076234</title>
  <meta name="viewport" content="width = device-width, inital-scale = 1.0">
  <script src="assignment2/ass2script.js"></script>
  <h1 id="h1">Welcome To My WebForm</h1>
  <h2 id="h2"> CV Request</h2>
</head>

<body>
  <!-- form -->
  <form action="" method="post" onsubmit="return validation()">
    <div class="wrap">
      <div class="form1">
        <div class="input-fields">
          <input type="text" class="input" placeholder="Name" id="Name">
          <input type="email" class="input" placeholder="Email" id="Email">
          <input type="tel" class="input" placeholder="Telephone" id="Telephone">
          <input type="text" class="input" placeholder="Company" id="Telephone"><br>
          <input type="submit" name="submit" value="Insert now">
          <!--buttons-->
          <label>Short CV
<input type="radio" checked="checked">
    </label> <br>
          <label>Long CV
     <input type="radio">
    </label>
          <!-- messgebox -->
        </div>
        <div class="message">
          <textarea placeholder="Message"></textarea>
          <div class="btn">send</div>
        </div>
      </div>
    </div>
  </form>
  <!--buttons-->
  <div id="eresult"></div>
  <!-- javascript -->
  <script type="text/javascript">
  </script>

</body>

</html>

Thanks again for the reply Barmar but i still cant seem to get it working, I am also implementing it onto html and not JavaScript — JackC, Apr 09 '19 at 21:28
The fixes I made work, I can't tell what you're still doing wrong. — Barmar, Apr 09 '19 at 21:30
If i edit my question with the new code can you see what i am still doing wrong? — JackC, Apr 09 '19 at 21:33
Don't remove the original code, add the new code at the end. — Barmar, Apr 09 '19 at 21:35
If your new code produces errors in the console, I'll be annoyed. — Barmar, Apr 09 '19 at 21:36
False alarm Barmar i got it working, thanks alot for your help! One issue i still have though is 'send' button is not working, i implemented the 'insert now' button just for testing because i knew my other button was not working. Any idea how i can fix this? — JackC, Apr 09 '19 at 21:41
You need to add an `onclick` handler for the DIV that calls `validation()`, and if it succeeds it then calls the form's `submit()` method. — Barmar, Apr 09 '19 at 21:44

Trouble implementing validation using java script in html

`.

1 Answers1