CODEWITHSUNDEEP
javascript
Behar
Behar

Reputation: 179

Validating contact form with javascript

The code below obviously has a lot of errors or some other things missing but I am beginner to JavaScript trying to make my own projects.

I tried to make this contact form with JavaScript validation from my own and a bit with a search but I'm stuck because validation form doesn't work at all. I would appreciate if you help me fixing this, thank you.

let name = document.querySelector('.name');
let email = document.querySelector('.email');
let submit = document.querySelector('.submit');

function validateName() {
  if (name === null) {
    error.innerHTML = 'Name cannot be blank';
    return false;
  } else if (name < characters.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
    return false;
  }
}

function validateEmail() {
  if (email === null) {
    error.innerHTML = 'Email cannot be blank';
    return false;
  } else if (email < characters.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
    return false;
  }
}

function submitForm() {
  document.querySelector('.submit').submit();
}
.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}
<div class="info">
  <div class="info-form">
    <input class="name" type="text" placeholder="Your Name">
    <br>
    <input class="email" type="email" placeholder="Your Email">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

Upvotes: 1

Views: 227

Answers (5)

cb64
cb64

Reputation: 855

Alot of your syntax and validation methods are off. Few tips: you need to use name.value and email.value to get the values of the elements, you also need to use name.value.length instead of email < characters.length < 5 and change the button type to submit and you can negate having to call it in JS.

Below is a working snippet based on the code you posted. I believe it does what you want.

let error = document.getElementById('error');

function validateName() {
let name = document.getElementById('name');
  if (!name.value) {
    error.innerHTML = 'Name cannot be blank';
    return false;
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters on name';
    return false;
  }
}

function validateEmail() {
let email = document.getElementById('email');
  if (!email.value) {
    error.innerHTML = 'Email cannot be blank';
    return false;
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 5 characters on email';
    return false;
  }
}

function submitForm() {
  error.innerHTML = ""
  validateEmail()
  validateName()
}
.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}
<div class="info">
  <div class="info-form">
    <input id="name" type="text" placeholder="Your Name">
    <br>
    <input id="email" type="email" placeholder="Your Email">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <br>
    <button class="submit" type = "submit" action="/submit.php" onclick="submitForm()">Submit</button>
    <div id="error">
    </div>
  </div>
</div>

Upvotes: 2

YakovL
YakovL

Reputation: 8347

Well, you only defined validation methods but don't use them, that's why they have no effect.

You should add event listeners like onchange (or oninput, depending on when you'd like to show error messages) to your fields.

For instance:

<input class="name" type="text" placeholder="Your Name" onchange="validateName()">

Actually, you have multiple more problems:

  • error is undefined: you should create another element and find it in JS
  • you have to use element.value, not element to access a value of input
  • you have undefined characters used in a weird way in your checks; to check the length of content, use element.value.length

Here's a snippet with these fixes:

let name = document.querySelector('.name');
let email = document.querySelector('.email');
let submit = document.querySelector('.submit');
let error = document.querySelector('.error');

function validateName() {
  if (!name.value) {
    error.innerHTML = 'Name cannot be blank';
    return false;
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
    return false;
  }
}

function validateEmail() {
  if (!email.value) {
    error.innerHTML = 'Email cannot be blank';
    return false;
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
    return false;
  }
}

function submitForm() {
  document.querySelector('.submit').submit();
}
.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}
<div class="info">
  <div class="info-form">
    <input class="name" type="text" placeholder="Your Name" onchange="validateName()">
    <br>
    <input class="email" type="email" placeholder="Your Email" onchange="validateEmail()">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <div class="error"></div>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

Moreover, I'd make some more improvements to the code, namely

  • use event.target inside event handlers instead of calcing the elements globally (note the difference in usage inside html too);
  • clear the error div when the content is ok!
  • why multiple return false instead of one in the end of the handler?
  • you don't use the submit variable, get rid of it; does submitForm do anything useful? (submits on submit??) Not sure, but it seems it should be removed, too

let error = document.querySelector('.error');

function validateName(event) {
  let name = event.target;
  if (!name.value) {
    error.innerHTML = 'Name cannot be blank';
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
  } else {
    error.innerHTML = '';
  }
  return false;
}

function validateEmail(event) {
  let email = event.target;
  if (!email.value) {
    error.innerHTML = 'Email cannot be blank';
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
  } else {
    error.innerHTML = '';
  }
  return false;
}

function submitForm() {
  document.querySelector('.submit').submit();
}
.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}
<div class="info">
  <div class="info-form">
    <input class="name" type="text" placeholder="Your Name" onchange="validateName(event)">
    <br>
    <input class="email" type="email" placeholder="Your Email" onchange="validateEmail(event)">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <div class="error"></div>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

Upvotes: 2

NTR
NTR

Reputation: 1355

Here's something that works to a minimum using your current code. I added comments to explain what is going on. Don't hesitate to ask me for any clarifications. Like you said, code can be improved further but I didn't want to change too much and confuse you.

let name = document.querySelector('.name');
let email = document.querySelector('.email');
let submit = document.querySelector('.submit');
let error = document.querySelector('#error'); //Get's the span in the html where the errors will be shown.

function validateName() {
  //Get the text value of name with name.value and care with an empty string.
  if (name.value === "") {
    error.innerHTML = 'Name cannot be blank';
    return false;
    //Get the number of character in the value of the name and see if you have less than 3.
  } else if (name.value.length < 3) {
    error.innerHTML = 'Use more than 3 characters';
    return false;
  }
}

function validateEmail() {
//Get the text value of name with name.value and compare with an empty string.
  if (email.value === "") {
    error.innerHTML = 'Email cannot be blank';
    return false;
    //Get the number of characters in the value of the email and see if you have less than 5.
  } else if (email.value.length < 5) {
    error.innerHTML = 'Use more than 3 characters on email';
    return false;
  }
}

function submitForm() {
//Instead of calling the function .submit (that doesn't exist). Call the verification functions that you made.
  validateName();
  validateEmail();
}
.info {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  text-align: center;
  background-color: mediumslateblue;
  font-size: 22px;
}

.name {
  margin-top: 10px;
}

.email {
  margin-top: 10px;
}

.mesage {
  margin-top: 10px;
}

.submit {
  margin-bottom: 10px;
}
<div class="info">
  <div class="info-form">
    <span id="error"></span>
    <input class="name" type="text" placeholder="Your Name">
    <br>
    <input class="email" type="email" placeholder="Your Email">
    <br>
    <textarea name="message" class="mesage" cols="36" rows="3" placeholder="Your message"></textarea>
    <br>
    <button class="submit" action="/submit.php" onclick="submitForm()">Submit</button>
  </div>
</div>

Upvotes: 1

Shelley Suhling
Shelley Suhling

Reputation: 63

Yeah, like what the other contributors said, the validate functions are written well, they just aren't being called.

You can either add them to the onchange property of your input elements, or call it in your submitform function like so:

function validateName() {
    if (name === null) {
        error.innerHTML = 'Name cannot be blank';
        return false;
    } else if (name < characters.length < 3) {
        error.innerHTML = 'Use more than 3 characters';
        return false;
    }
    return true;
}
function validateEmail() {
    if (email === null) {
        error.innerHTML = 'Email cannot be blank';
        return false;
    } else if (email < characters.length < 5) {
        error.innerHTML = 'Use more than 3 characters on email';
        return false;
    }
    return true;
}

function submitForm(){
    if(validateName() && validateEmail()){
      //Do whatever submitting entails
    }
}

Also remember to add an error div to your html to display the errors, and to create an error querySelector variable like you did with name, email and submit.

You're doing great! Keep up the good work!

Upvotes: 1

Casey Anderson
Casey Anderson

Reputation: 462

You've written your JS function validateName and validateEmails but you aren't calling those functions anywhere. Instead of selecting the .submit button inside of submitForm(), call those functions. The line you have inside of submitForm is doing nothing. onclick() within your HTML handles the calling of the function submitForm(), and submitForm() should then validate your form.

Edit: you can also call validateName and validateEmails when the email or name fields are edited.

Upvotes: 1

Related Questions