Reputation: 251
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
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
Reputation: 1288
Change this
errorMessage = errorMessage+ "Q#2 - 50 character required. " + Q2text + " characters remaining. \n";
if(errorMessage)
Upvotes: 1