Search code examples
javascripthtmljquerybootstrap-5

Form validation for text area inputs fails if user enters newline character only

I'm building a form using Bootstrap 5 custom form validation. The issue I'm having is that if a user clicks into a textarea input that requires a value, hits "enter" to create a new line, and then tries to submit the form, the form validator doesn't stop the form submission. It thinks that the newline character is a valid value, when it is not. I can't seem to find any documentation on how to handle this.

I did add a condition to my JavaScript to catch this, however, it's confusing for the user since the bootstrap validation shows a green check mark on the input even though it's not a valid entry. See screenshots as well as code below...here's a codepen too.

I've read several other forms about form validation and bootstrap, but I can't find one that specifically addresses preventing a line break character from being considered a valid input on it's own.

enter image description here

// Initialize form validation
const initializeFormValidation = () => {
  "use strict";
  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll(".needs-validation");
  // Loop over them and prevent submission
  Array.prototype.slice.call(forms).forEach(function(form) {
    form.addEventListener(
      "submit",
      function(event) {
        if (!form.checkValidity()) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add("was-validated");
      },
      false
    );
  });
};

initializeFormValidation();

// Reset form validation
$("#reset-button").on("click", () => {
  $("#test-form").removeClass("was-validated");
  $("#test-form").addClass("needs-validation");
});
/* Required Fields */

.required-field::after {
  content: "*";
  color: red;
  margin-left: 2px;
}

.required-field-margin-left::after {
  content: "*";
  color: red;
  margin-left: -2px;
}

form {
  padding-left: 10px;
  padding-top: 12px;
}

#help-text {
  width: 550px;
  margin-bottom: 1rem;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<form id="test-form" class="needs-validation" novalidate>
  <div class="col-md-4">

    <div id="help-text">First, hit the submit form button to see the form validation stop form submission.

      <br><br>
    Then, click into the textarea box and hit enter.

      <br><br>

    You'll see the form validator say that the newline character is valid, when it is not.
    </div>

    <textarea type="textarea" class="form-control" id="textarea-input" placeholder="Enter a new line character only" required></textarea>
    <div id="validationServerUsernameFeedback" class="invalid-feedback">
      Please enter a value.
    </div>

  </div>
  <br>
  <div class="mb-3">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>

  <div class="mb-3">
    <button id="reset-button" class="btn btn-secondary" type="button">Reset form</button>
  </div>

</form>

Solution

  • You can use attributes such as minlength and maxlength to add validation rules to the field.

    ex:

    textarea {
  display: block;
  margin-top: 10px;
}

textarea:valid {
  background-color: palegreen;
}

textarea:invalid {
  background-color: lightpink;
}
    <textarea 
  type="textarea" 
  class="form-control" 
  id="textarea-input" 
  placeholder="Enter a minimum of 10 characters" 
  minlength="10" 
  required>
</textarea>

<textarea 
  type="textarea" 
  class="form-control" 
  id="textarea-input" 
  placeholder="Enter between 5 and 10 characters" 
  minlength="5" 
  maxlength="10"
  required>
</textarea>