Check textarea is empty with queryselector

Question

I am trying to check if "textarea" is empty and if thats the case trigers a validation function. so far It works if I use an input but textarea doesnt have a value and queryselector doesnt get a value of it.

Javascript

const commentValidation = document.querySelectorAll("textarea").value;
const checkComment = () =>{
    let valid = false;
    const comment = commentValidation;
    if(!isRequired(comment)){
        showError(commentValidation, "Comment cannot be blank");
    }else if(!isCommentValid(comment)){
        showError(commentValidation,"comment is not valid")
    }else{
        showSuccess(commentValidation);
        valid = true;
    }
    return valid;
};

const isCommentValid = (comment) =>{
    const re = /[a-zA-Z]/;
    return re.test(comment);
};
const showSuccess = (input) =>{
    const formField = input.parentElement;
    formField.classList.remove('error');
    formField.classList.add('success');
    const error = formField.querySelector('small');
    error.textContent = '';
}
form.addEventListener('submit', function (e){
    e.preventDefault();
    let isCommentValid = checkComment(),
                
    let isCommentValid
      
    if (isFormValid){        
    }
});

HTML

<div class ="form-field">

   <label for="comment">Send a comment</label>
   <textarea id="commentID" name="comment" autocomplete="off"></textarea>
   <small></small>

</div>

Any ideas how to use queryselector and check if user didnt put a comment.

_"and queryselector doesnt get a value"_ - If you would have used `.querySelector()` instead of `.querySelectorAll()` it would have worked (at least if you read the `.value` _in_ `checkComment()` — Andreas, Jun 01 '21 at 13:30
This is either a _"Typo"_-CV or a dupe of [What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Andreas, Jun 01 '21 at 13:33

score 0 · Answer 1 · answered Jun 01 '21 at 13:37

You don't need a javascript validation. Just add required to the textarea, and the browser will handle everything for you.

<form onsubmit="return false">
  <div class="form-field">

     <label for="comment">Send a comment</label>
     <textarea id="commentID" name="comment" autocomplete="off" required></textarea>
     <small></small>

  </div> 
  
  <button type="submit">Submit</button>
</form>

score 0 · Answer 2 · answered Jun 01 '21 at 13:41

the submit property is a property of a button or form. but you are using a div.

change html

<form class ="form-field" id="form-div">
   <label for="comment">Send a comment</label>
   <textarea id="commentID" name="comment" autocomplete="off"></textarea>
   <small></small>
</form>

here we convert div tag to form

add javascript

const form = document.getElementById("form-div");

and let's put a trigger

in javascript

form.addEventListener('keyup', function (e){
    e.preventDefault();
    if (e.key === 'Enter' || e.keyCode === 13) {
      form.submit();  
    }
});

Press the enter key and the form will be sent.

Working Demo : Demo

Check textarea is empty with queryselector

2 Answers2