CODEWITHSUNDEEP
javascript
Jenny Tran
Jenny Tran

Reputation: 251

Javascript validation form check for textarea length

I am working on the Javascript validation code to check empty fields on comments, 50 characters minimum for each comment textarea. I take 50 deduct by the text entered to show characters remaining on the error popup message. However, when I open the form, I have not entered anything, clicked Submit button, only the Question #2 pop up error message as "Q#2 - 50 character required. 50 characters remaining. Question #1 should show the same error message but it didn't.

Can you help me please?

Here is the code:

function check() {
  var errorMessage = '';

  var Q1textLength = document.getElementById('textarea1').value.length;
  var Q1text = 50 - Q1textLength
  if (Q1textLength < 50)
    errorMessage += "Q#1 - 50 character required.  " + Q1text + " characters remaining. \n";

  var Q2textLength = document.getElementById('textarea2').value.length;
  var Q2text = 50 - Q2textLength
  if (Q2textLength < 50)
    errorMessage = "Q#2 - 50 character required.  " + Q2text + " characters remaining. \n";
  if (errorMessage) {
    alert(errorMessage);
    return false;
  }
  return true;
}
<form action="action.asp" name="frm1" method="Post" />
<fieldset>
  <legend>Question 1</legend>
  <label for="Comment1">Comments:</label>
  <textarea rows="3" cols="85" name="Q1C" id="textarea1" placeholder="Write at least 50 characters" required /></textarea>
</fieldset>

<fieldset>
  <legend>Question 2</legend>
  <label for="Comment2">Comments:</label>
  <textarea rows="3" cols="85" name="Q2C" id="textarea2" placeholder="Write at least 50 characters" required /></textarea>
</fieldset>

<p class="submit"><input type="submit" onClick="return check()" value="Submit"></p>
</form>

Upvotes: 1

Views: 437

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

That Because you're overriding the variable errorMessage in the second question by using equal =, you should use += instead.

NOTE : You've an extra slash / in your textarea's that should be removed :

<textarea .... placeholder="Write at least 50 characters" required /></textarea>
___________________________________________________________________^


function check() {
  var errorMessage = '';

  var Q1textLength = document.getElementById('textarea1').value.length;
  var Q1text = 50 - Q1textLength
  if (Q1textLength < 50)
    errorMessage += "Q#1 - 50 character required.  " + Q1text + " characters remaining. \n";

  var Q2textLength = document.getElementById('textarea2').value.length;
  var Q2text = 50 - Q2textLength
  if (Q2textLength < 50)
    errorMessage += "Q#2 - 50 character required.  " + Q2text + " characters remaining. \n";
  if (errorMessage) {
    alert(errorMessage);
    return false;
  }
  return true;
}
<form action="action.asp" name="frm1" method="Post" />
<fieldset>
  <legend>Question 1</legend>
  <label for="Comment1">Comments:</label>
  <textarea rows="3" cols="85" name="Q1C" id="textarea1" placeholder="Write at least 50 characters" required></textarea>
</fieldset>

<fieldset>
  <legend>Question 2</legend>
  <label for="Comment2">Comments:</label>
  <textarea rows="3" cols="85" name="Q2C" id="textarea2" placeholder="Write at least 50 characters" required></textarea>
</fieldset>

<p class="submit"><input type="submit" onClick="return check()" value="Submit"></p>
</form>

Upvotes: 3

Shubham
Shubham

Reputation: 1288

Change this

errorMessage = errorMessage+ "Q#2 - 50 character required.  " + Q2text + " characters remaining. \n";
if(errorMessage)

Upvotes: 1

Related Questions