If Else Statement is not being executed

Question

I have a contact form, which includes required fields. I have written an If else statement so that if the required fields are empty, the form will not be sent and if it is, the form will be sent and cleared. The If part of the statement is executing, but the else doesn't seem to be. I am still learning Javascript so i have probably done something incorrectly.

I have tried looking at looking at layouts of If else statements and amending mines, but this has not helped.

<form name="myForm" class="contact-form" 
action="mailto:someone@example.com" method="post" enctype="text/plain">
    <input type="text" name="yname" class="contact-form-text" 
placeholder="Your Name" required>
    <input type="email" name="yemail" class="contact-form-text" 
placeholder="Your Email" required>
    <textarea class="contact-form-text" name="ymessage" placeholder="Your 
Message" required></textarea>
    <input type="reset" class="contact-form-btn-reset" value="Reset">
    <input type="submit" class="contact-form-btn" onClick="return 
submitForm()" value="Send">

    <script>
      function submitForm() {
        var x = document.forms["myForm"][yname][yemail][ymessage].value;
        if (x == "") {
          alert("Please complete form.");
          return false;
        } else {
          alert("Your message has been sent.");
          var frm = document.getElementsByName('myForm')[0];
          frm.submit();
          frm.reset();
          return false;
        }
      }
    </script>
  </form>

When the submit button is pressed, i'm expecting the form to submit with an alert and clear (if all fields are completed), if all fields aren't completed i expect the form to not submit.

Answer 1

You should really be using the onSubmit handler

As people already pointed at on the comments, there is already a built-in way to verify if all required fields are filled before submitting the form, which is quite more elegant to use. In order to do that, all you need to do is using the onSubmit handler instead of onClick:

<input type="submit" class="contact-form-btn" onClick="return submitForm()" value="Send">

This way, you don't write any code to verify if the user filled all the field properly.

If you still want to use javascript:

The code you wrote does not work as expected because there is not a var called yname on your space. If you really want to do this check via javascript, you could do something like this:

var myForm = document.forms["myForm"];
if (!myForm["yname"].value || myForm["email"].value || myForm["ymessage"].value) {
  alert("Please complete form.");
  return false;
}

Answer 2

You are not correctly accessing the value. Please take a look at my answer below:

document.querySelector('form[name="myForm"]').onsubmit = ev => {
  let yName = document.querySelector('input[name="yname"]').value;
  if (yName) {
    alert("Your message has been sent.");
  } else {
    ev.preventDefault();
    alert("Please complete form.");
  }
};

<form name="myForm" class="contact-form" action="mailto:someone@example.com" method="post" enctype="text/plain">
  <input type="text" name="yname" class="contact-form-text" placeholder="Your Name" required>
  <input type="email" name="yemail" class="contact-form-text" placeholder="Your Email" required>
  <textarea class="contact-form-text" name="ymessage" placeholder="Your 
Message" required></textarea>
  <input type="reset" class="contact-form-btn-reset" value="Reset">
  <input type="submit" class="contact-form-btn" value="Send">
</form>

Answer 3

When your input is blank, the web browser is preventing the form submission because of the required attribute. If you remove it, things should work how you expect. I would encourage you go use the required attribute and HTML form validation. It's much simpler that writing your own.

Answer 4

Most likely your problem is that the code stops executing at

var x = document.forms["myForm"][yname][yemail][ymessage].value

This is because, yname, yemail, and ymessage are undeclared variables.

You can access an object using this notation, but the keys sent to the [] operator must be a valid string.

I think what you might want to do is

var name = document.forms["myForm"]["yname"].value
var email = document.forms["myForm"]["yemail"].value
var message = document.forms["myForm"]["ymessage"].value

Also one more thing, inputs on your form should have an id="yname", id="yemail" and so forth.

Example:

<input type="email" name="yemail" class="contact-form-text" placeholder="Your Email" required id="yemail">

Edit: Using name attributes are valid, but as i said above, the code stops executing upon the first use of yname, this is because the variable doesn't exist.