JavaScript form Validation - textarea field to display an alert if no text has been entered-CodePudding

I can't seem to target the textarea field in this function.

I'm essentially using HTML "required" validation for the first three input fields, but for the textarea, I simply want to display an alert if the textarea field is empty when the user submits the form.

Or possibly, I'd like to display text within the textarea field, stating "please enter more information", if the user attempts to submit the form without filling that area in.

      <form action=""  method="POST" id="contactForm">
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" required><br>
                        <label for="number">Number:</label>
                        <input type="number" id="number" name="number" required><br>
                        <label for="email">Email:</label>
                        <input type="email" id="email" name="email" required><br>
                        <textarea id= "textArea" rows ="3" cols ="23" name="finalMessage " form="contactForm" placeholder="Enter your fitness goals..."></textarea><br>
                        <button id="buttonID">Submit</button>
                    </form>

JavaScript


function formValidation(e) {
    e.preventDefault();
    const form = document.getElementById("contactForm");
    const textArea = document.getElementById("textArea").value;

    if(textArea.value === ""){
        alert("please enter more information");
    }

    document.getElementById("buttonID").addEventListener("click", function () {
        form.submit();
    });

} formValidation();

CodePudding user response：

OK, let's start with onsubmit event listener:

<form action=""  method="POST" id="contactForm" onsubmit="formValidation(event)">

Then simplify the formValidation method:

function formValidation(event) {
    if (document.getElementById("textArea").value == "") {
        alert("please enter more information");
            event.preventDefault();
    }
}

And if you want to know why your code doesn't work take a look at the textArea variable that already contains the text area value. Then look at your condition that trys to get parameter value out of a string.

CodePudding user response：

You can try the below approach. Add an onSubmit event on the form and remove all other events. Add an if condtion inside the formValidation() function as below.

if (!textArea.value) {
    alert("please enter more information");
  }

Now it will show the alert message when all other input fields are filled and only textarea is empty.

Note: alert message will be shown only when Name, Number and Email fields have some have in them

Working code:

function formValidation() {
  const form = document.getElementById("contactForm");
  const textArea = document.getElementById("textArea").value;
  if (!textArea.value) {
    alert("please enter more information");
  }
}

<form action=""  method="POST" id="contactForm" onSubmit="formValidation()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required><br>
  <label for="number">Number:</label>
  <input type="number" id="number" name="number" required><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br>
  <textarea id="textArea" rows="3" cols="23" name="finalMessage " form="contactForm" placeholder="Enter your fitness goals..."></textarea><br>
  <button id="buttonID">Submit</button>
</form>