Submodule 8.3: Form validation

7. The textarea element

The below code creates the validation for the textarea.

According to user's input, it displays the appropriate border color. It also displays the appropriate message in the span area with id "feedbackInfo".

The HTML code:

<div class = "required">
  <p>Please enter any feedback you have.</p>
  <textarea name="feedback" id="feedback" 
     placeholder ="Your feedabck goes here" 
     rows="3" cols="60" minlength="4" required></textarea>
  <span id="feedbackInfo" ></span>
</div>

and the JavaScript code:

<script>
  var myfeedback = document.getElementById("feedback");
  var myfeedbackInfo = document.getElementById("feedbackInfo");
  myfeedback.oninput = function () {
    if (!this.validity.valid) {
      myfeedback.style.border="solid 3px red";
      myfeedbackInfo.innerHTML="Your feedback must include at least 4 characters."
    }
    else {
      myfeedback.style.borderColor = "green";
      myfeedbackInfo.style.display = "none"
    }
}
</script>

will create a textarea displayed as: