How can I post the validation of my form to one alert()?

Question

Just a quick preface, I'm currently learning JavaScript through college and am very much a beginner but would really appreciate some help if possible with this.

I have a HTML form with multiple fields of varying field types and the criteria for my assignment requires me to validate each field to check if a value was entered. If not, the form should not submit.

I've created a function which is called when the user hits the submit button, which validates each field. I'm happy this works correctly, however it was originally creating an alert just for the first field which was not populated/selected, I'm now trying to combine the result of each validation into one alert but seem to be stuck.

<html>
<head>
<script>
var alertmsg1 = "You are missing the following fields:";
var alertmsg2 = "";

function validateForm() {
  var a = document.forms["contactForm"]["title"].value;
  if (a == "") {
    alertmsg2 = alertmsg2 + "\nTitle";
  }
  var b = document.forms["contactForm"]["gender"].value;
  if (b == "") {
    alertmsg2 = alertmsg2 + "\nGender";
  }
  var c = document.forms["contactForm"]["firstName"].value;
  if (c == "") {
    alertmsg2 = alertmsg2 + "\nFirst Name";
  }
  var d = document.forms["contactForm"]["surname"].value;
  if (d == "") {
    alertmsg2 = alertmsg2 + "\nSurname";
  }
  var e = document.forms["contactForm"]["country"].value;
  if (e == "") {
    alertmsg2 = alertmsg2 + "\nCountry";
  }
  var f = document.forms["contactForm"]["contactNum"].value;
  if (f == "") {
    alertmsg2 = alertmsg2 + "\nContact Number";
  }
  var g = document.forms["contactForm"]["email"].value;
  if (g == "") {
    alertmsg2 = alertmsg2 + "\nEmail";
  }
  var h = document.forms["contactForm"]["message"].value;
  if (h == "") {
    alertmsg2 = alertmsg2 + "\nMessage";
  }
  if (telchecked == "1") {
    return true;
  }
  if (emchecked == "0") {
  alertmsg2 = alertmsg2 + "\nPreferred Contact Method";
  }
  if (alertmsg2 = "") {
    return true;
  } else {
    alert(alertmsg1 + alertmsg2);
    return false;
  }
}
</script>
</head>
<body>

  <form name="contactForm" action="/action_page.php" onsubmit="return validateForm()" method="post">

    <!-- title -->
  <label for="Titles">Title:</label><br>
  <select name="title">
    <option value="">-</option>
    <option value="mr">Mr</option>
    <option value="mrs">Mrs</option>
    <option value="miss">Miss</option>
    <option value="dr">Dr</option>
  </select><br><br>

  <!-- gender -->
  <label for="gender">Gender: </label><br>
  <input type="radio" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" name="gender" value="female">
  <label for="female">Female</label>
  <input type="radio" name="gender" value="other">
  <label for="other">Other</label><br><br>

  <!-- fist name -->
  <label for="firstName">First name:</label><br>
  <input type="text" name="firstName" value=""><br><br>

  <!-- surname -->
  <label for="Surname">Surname:</label><br>
  <input type="text" name="surname" value=""><br><br>

  <!-- country list -->
  <label for="Country">Select your country:</label><br>
  <select name="country">
     <option value="Afganistan">Afghanistan</option>
     <option value="Albania">Albania</option>
     <option value="Algeria">Algeria</option>
     <!-- left out country list for this post as quite long... -->
  </select><br><br>

  <!-- telephone -->
  <label for="contactNum">Contact number:</label><br>
  <input type="text" name="contactNum" value=""><br><br>

  <!-- email -->
  <label for="email">Email address:</label><br>
  <input type="text" name="email" value=""><br><br>

  <!-- message -->
  <label for="Message">Message:</label><br>
  <textarea name="message" rows="10" cols="30" value=""></textarea><br><br>

  <!-- preferred contact method -->
  <label for="checkbox">Preferred contact method:</label><br>
  <input type="checkbox" id="prefTel" name="prefTelephone" onclick="prefTelFunc()">
  <label for="mobile"> Mobile</label>
  <input type="checkbox" id="prefEm" name="prefEmail" onclick="prefEmFunc()">
  <label for="email"> Email</label><br><br>

  <!-- submit button -->
  <input type="submit" value="Submit">

  </form>

</body>
</html>

I'm currently trying to do it by storing the results of each validation into the variable "alertmsg2" and then posting this in one alert().

I'm sure there are much more elegant ways to express all this but if someone could help me work with what I have that would be awesome.

Thanks in advance and sorry if I've left anything out I should've included, I'm new to posting here.

Thanks,

J

Get a tool like ESLINT it will find errors like when you set a string to equal something inside an if statement. — epascarello, Jun 01 '21 at 15:20

score 1 · Answer 1 · answered Jun 01 '21 at 15:16

1

I noticed in the following code:

if (alertmsg2 = "") {
return true;
}

You used = instead of == in the if statement. This makes it an assignment, and will not return a boolean value for the if statement to check. Maybe you would like to check if that's the cause for your problem.

answered Jun 01 '21 at 15:16

drkrs

11
2

Thankyou for spotting this, seems I must have issues with my code elsewhere too though. Many thanks. – high-confessor Jun 01 '21 at 17:13
This would also be a great question to review as it goes over the differences between `==` and `===`: https://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons – Jeff B Jun 01 '21 at 18:42
@JeffB Thank you, this was a helpful read. – high-confessor Jun 01 '21 at 19:02

Amit Gupta · Answer 2 · 2021-06-01T16:58:16.563

<html>
<head>
    <script>
var alertmsg1 = "You are missing the following fields:";
var alertmsg2 = "";

function validateForm() {
  var a = document.forms["contactForm"]["title"].value;
  if (a == "") {
    alertmsg2 = alertmsg2 + "\nTitle";
  }
  var b = document.forms["contactForm"]["gender"].value;
  if (b == "") {
    alertmsg2 = alertmsg2 + "\nGender";
  }
  var c = document.forms["contactForm"]["firstName"].value;
  if (c == "") {
    alertmsg2 = alertmsg2 + "\nFirst Name";
  }
  var d = document.forms["contactForm"]["surname"].value;
  if (d == "") {
    alertmsg2 = alertmsg2 + "\nSurname";
  }
  var e = document.forms["contactForm"]["country"].value;
  if (e == "") {
    alertmsg2 = alertmsg2 + "\nCountry";
  }
  var f = document.forms["contactForm"]["contactNum"].value;
  if (f == "") {
    alertmsg2 = alertmsg2 + "\nContact Number";
  }
  var g = document.forms["contactForm"]["email"].value;
  if (g == "") {
    alertmsg2 = alertmsg2 + "\nEmail";
  }
  var h = document.forms["contactForm"]["message"].value;
  if (h == "") {
    alertmsg2 = alertmsg2 + "\nMessage";
  }
  var i = document.forms["contactForm"]["contactNum"].checked;
  if (i == true) {
      alertmsg2 = alertmsg2 + "\Telephone";
  }
  var j = document.forms["contactForm"]["email"].checked;
  if (j == true) {
    alertmsg2 = alertmsg2 + "\nPreferred Contact Method";
  }
  if (alertmsg2 == "") {
    return true;
  } else {
    alert(alertmsg1 + alertmsg2);
    return false;
  }
}
    </script>
</head>
<body>

    <form name="contactForm" action="/action_page.php" method="post">

        <!-- title -->
        <label for="Titles">Title:</label><br>
        <select name="title">
            <option value="">-</option>
            <option value="mr">Mr</option>
            <option value="mrs">Mrs</option>
            <option value="miss">Miss</option>
            <option value="dr">Dr</option>
        </select><br><br>

        <!-- gender -->
        <label for="gender">Gender: </label><br>
        <input type="radio" name="gender" value="male">
        <label for="male">Male</label>
        <input type="radio" name="gender" value="female">
        <label for="female">Female</label>
        <input type="radio" name="gender" value="other">
        <label for="other">Other</label><br><br>

        <!-- fist name -->
        <label for="firstName">First name:</label><br>
        <input type="text" name="firstName" value=""><br><br>

        <!-- surname -->
        <label for="Surname">Surname:</label><br>
        <input type="text" name="surname" value=""><br><br>

        <!-- country list -->
        <label for="Country">Select your country:</label><br>
        <select name="country">
            <option value="Afganistan">Afghanistan</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <!-- left out country list for this post as quite long... -->
        </select><br><br>

        <!-- telephone -->
        <label for="contactNum">Contact number:</label><br>
        <input type="text" name="contactNum" value=""><br><br>

        <!-- email -->
        <label for="email">Email address:</label><br>
        <input type="text" name="email" value=""><br><br>

        <!-- message -->
        <label for="Message">Message:</label><br>
        <textarea name="message" rows="10" cols="30" value=""></textarea><br><br>

        <!-- preferred contact method -->
        <label for="checkbox">Preferred contact method:</label><br>
        <input type="checkbox" id="prefTel" name="prefTelephone" onclick="prefTelFunc()">
        <label for="mobile"> Mobile</label>
        <input type="checkbox" id="prefEm" name="prefEmail" onclick="prefEmFunc()">
        <label for="email"> Email</label><br><br>

        <!-- submit button -->
        <input type="submit" value="Submit" onclick="return validateForm();">

    </form>

</body>
</html>

I have made below improvement in your code -

Call the validate function on click of submit button instead of form submit, it will validate the fields on client side and return false if validation failed.
'==' is used for comparison and '=' is used assigning the value. So when have if then you should use '==' or you can also use '===', this also checks the datatype while compare.

Thanks for the response. I've made the amendment to calling the function with clicking the submit button, that does make much more sense. I'll also be more careful with my =/==/===. Many thanks. — high-confessor, Jun 01 '21 at 17:19

How can I post the validation of my form to one alert()?

2 Answers2