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="" class="contactForm" 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();
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="" class="contactForm" 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>OK, let's start with onsubmit event listener:
<form action="" class="contactForm" 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.