I am trying to create a form validation for textarea. It requires users to enter a minimum characters in the ment box. If they enter less than required minimum characters, then when they hit Submit button, it shows error. The error should show the numbers of characters they already entered and the message. For example: Question #1 - You wrote n characters. Please write at least 50 characters for Question1.
Currently, I set 50 characters for minlength and 500 characters for maxlength. However, it does not work.
Can anyone help me?
Here is my code:
<html>
<head>
<title>Questions</title>
<style type="text/css">
textarea {
display:block;
margin:1em 0;
}
</style>
<script language="javascript">
function lText(lField, lNum) {
if (lField.value.length > lNum) {
lField.value = lField.value.substring(0, lNum);
}
}
// Check for the Form Validation
function ckForm() {
var charLimit = [obj.getAttribute('minlength'), obj.getAttribute('maxlength')];
var fieldID = obj.getAttribute('id');
var errs = 0
var msgbox = "You forgot to answer the following question(s).\nPlease plete and re-submit the form. Thank you!\n";
var go = msgbox
var ctr = 0;
var Traveler = document.getElementById("selectTraveler");
if (Traveler.options[Traveler.selectedIndex].value == '1') {
alert("Please select your name");
return false;
}
var post = document.getElementById("selectTrip");
if (post.options[post.selectedIndex].value == '1') {
alert("Please select a Trip name");
return false;
}
if (document.frm1.PeerNames.selectedIndex==0) {
msgbox = msgbox + "\n Peer Name - Please select Peer name";
}
if (document.frm1.Q1.selectedIndex==0) {
msgbox = msgbox + "\n Question #1 - Please select your rating for this question";
}
if (document.frm1.Q1C.value=="") {
msgbox = msgbox + "\n Question #1 - Please write a ment for Question1";
}
if (obj.value.length < charLimit[0]) {
msgbox = msgbox + "\n Question #1 - You wrote n characters. Please write at least 50 characters for Question1";
}
if (document.frm1.Q2.selectedIndex==0) {
msgbox = msgbox + "\n Question #2 - Please select your rating for this question";
}
if (document.frm1.Q2.value=="") {
msgbox = msgbox + "\n Question #2 - Please write a ment for Question2";
}
if (obj.value.length < charLimit[0]) {
msgbox = msgbox + "\n Question #2 - You wrote n characters. Please write at least 50 characters for Question2";
}
if (msgbox == go) {
return true;
}
else {
alert(msgbox);
return false;
}
}
</script>
</head>
<body>
<div>
<form action="action.asp" name="frm1" method="Post" onSubmit="return ckForm(this);" />
<select name="Traveler" title="Select Traveler" id="selectTraveler">
<option value="1">Select Your Name</option> <!-- Get blank row on top -->
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
</select>
<select name="TripName" title="Select Peers" id="selectTrip">
<option value="1">Select a Trip</option> <!-- Get blank row on top -->
<option value="USA">USA</option>
<option value="Canada">Canada</option>
</select>
<!-----------------------------------------Evaluation questions ---------------------------------------------->
<fieldset>
<legend>Question 1</legend>
<label for="Question1">Question 1</label>
<select name="Q1" size="1" title="Select Rating">
<option></option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>NA</option>
</select>
<label for="Comment1">Comments:</label>
<textarea rows="3" cols="85" name="Q1C" maxlength="500" minlength="50" title="Comments" id="Question1" class="textarea" /></textarea>
</fieldset>
<fieldset>
<legend>Question 2</legend>
<label for="Question2">Question 2</label>
<select name="Q2" size="1" title="Select Rating">
<option></option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>NA</option>
</select>
<label for="Comment2">Comments:</label>
<textarea rows="3" cols="85" name="Q2C" maxlength="500" minlength="50" title="Comments" id="Question2" class="textarea" /></textarea>
</fieldset>
<p class="submit"><input name="btnSubmit" type="submit" value=" Submit Form "> <input type="reset" name="Reset" value=" Clear "></p>
</form>
</div>
</body>
</html>
Thank you very much!
I am trying to create a form validation for textarea. It requires users to enter a minimum characters in the ment box. If they enter less than required minimum characters, then when they hit Submit button, it shows error. The error should show the numbers of characters they already entered and the message. For example: Question #1 - You wrote n characters. Please write at least 50 characters for Question1.
Currently, I set 50 characters for minlength and 500 characters for maxlength. However, it does not work.
Can anyone help me?
Here is my code:
<html>
<head>
<title>Questions</title>
<style type="text/css">
textarea {
display:block;
margin:1em 0;
}
</style>
<script language="javascript">
function lText(lField, lNum) {
if (lField.value.length > lNum) {
lField.value = lField.value.substring(0, lNum);
}
}
// Check for the Form Validation
function ckForm() {
var charLimit = [obj.getAttribute('minlength'), obj.getAttribute('maxlength')];
var fieldID = obj.getAttribute('id');
var errs = 0
var msgbox = "You forgot to answer the following question(s).\nPlease plete and re-submit the form. Thank you!\n";
var go = msgbox
var ctr = 0;
var Traveler = document.getElementById("selectTraveler");
if (Traveler.options[Traveler.selectedIndex].value == '1') {
alert("Please select your name");
return false;
}
var post = document.getElementById("selectTrip");
if (post.options[post.selectedIndex].value == '1') {
alert("Please select a Trip name");
return false;
}
if (document.frm1.PeerNames.selectedIndex==0) {
msgbox = msgbox + "\n Peer Name - Please select Peer name";
}
if (document.frm1.Q1.selectedIndex==0) {
msgbox = msgbox + "\n Question #1 - Please select your rating for this question";
}
if (document.frm1.Q1C.value=="") {
msgbox = msgbox + "\n Question #1 - Please write a ment for Question1";
}
if (obj.value.length < charLimit[0]) {
msgbox = msgbox + "\n Question #1 - You wrote n characters. Please write at least 50 characters for Question1";
}
if (document.frm1.Q2.selectedIndex==0) {
msgbox = msgbox + "\n Question #2 - Please select your rating for this question";
}
if (document.frm1.Q2.value=="") {
msgbox = msgbox + "\n Question #2 - Please write a ment for Question2";
}
if (obj.value.length < charLimit[0]) {
msgbox = msgbox + "\n Question #2 - You wrote n characters. Please write at least 50 characters for Question2";
}
if (msgbox == go) {
return true;
}
else {
alert(msgbox);
return false;
}
}
</script>
</head>
<body>
<div>
<form action="action.asp" name="frm1" method="Post" onSubmit="return ckForm(this);" />
<select name="Traveler" title="Select Traveler" id="selectTraveler">
<option value="1">Select Your Name</option> <!-- Get blank row on top -->
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
</select>
<select name="TripName" title="Select Peers" id="selectTrip">
<option value="1">Select a Trip</option> <!-- Get blank row on top -->
<option value="USA">USA</option>
<option value="Canada">Canada</option>
</select>
<!-----------------------------------------Evaluation questions ---------------------------------------------->
<fieldset>
<legend>Question 1</legend>
<label for="Question1">Question 1</label>
<select name="Q1" size="1" title="Select Rating">
<option></option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>NA</option>
</select>
<label for="Comment1">Comments:</label>
<textarea rows="3" cols="85" name="Q1C" maxlength="500" minlength="50" title="Comments" id="Question1" class="textarea" /></textarea>
</fieldset>
<fieldset>
<legend>Question 2</legend>
<label for="Question2">Question 2</label>
<select name="Q2" size="1" title="Select Rating">
<option></option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>NA</option>
</select>
<label for="Comment2">Comments:</label>
<textarea rows="3" cols="85" name="Q2C" maxlength="500" minlength="50" title="Comments" id="Question2" class="textarea" /></textarea>
</fieldset>
<p class="submit"><input name="btnSubmit" type="submit" value=" Submit Form "> <input type="reset" name="Reset" value=" Clear "></p>
</form>
</div>
</body>
</html>
Thank you very much!
Share Improve this question edited Jul 18, 2018 at 12:27 Jenny Tran asked Jul 18, 2018 at 12:09 Jenny TranJenny Tran 2416 silver badges16 bronze badges 3- Hi, it does not work, ok...can you tell more about it. How isn't it doing what you want ? Validation doesn't work ? Error message doesn't appear ? – JeanSaigne Commented Jul 18, 2018 at 12:16
-
24th line: missing semicolon @
var go = msgbox. – Wais Kamal Commented Jul 18, 2018 at 12:20 - I updated the code. Thanks. – Jenny Tran Commented Jul 18, 2018 at 12:53
3 Answers
Reset to default 3you shouldn't use javascript to validate the form, and please do never use alert() to deliver a message to the user: it's really annoying. You should use native HTML5 form validation attributes and error messages will be automagically displayed.
<html>
<head>
<title>Questions</title>
<style type="text/css">
textarea {
display: block;
margin: 1em 0;
}
:invalid {
border: 1px solid red;
}
:valid {
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<form action="action.asp" name="frm1" method="Post">
<select name="Traveler" title="Select Traveler" id="selectTraveler" required>
<option value="1">Select Your Name</option> <!-- Get blank row on top -->
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
</select>
<select name="TripName" title="Select Peers" id="selectTrip" required>
<option value="1">Select a Trip</option> <!-- Get blank row on top -->
<option value="USA">USA</option>
<option value="Canada">Canada</option>
</select>
<!-----------------------------------------Evaluation questions ---------------------------------------------->
<fieldset>
<legend>Question 1</legend>
<label for="Question1">Question 1</label>
<select name="Q1" size="1" title="Select Rating" required>
<option></option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>NA</option>
</select>
<label for="Comment1">Comments:</label>
<textarea rows="3" cols="85" name="Q1C" maxlength="500" minlength="50" title="Comments" id="Question1" class="textarea" required></textarea>
</fieldset>
<fieldset>
<legend>Question 2</legend>
<label for="Question2">Question 2</label>
<select name="Q2" size="1" title="Select Rating">
<option></option><option>10</option><option>9</option><option>8</option><option>7</option><option>6</option><option>5</option><option>4</option><option>3</option><option>2</option><option>1</option><option>NA</option>
</select>
<label for="Comment2">Comments:</label>
<textarea rows="3" cols="85" name="Q2C" maxlength="500" minlength="50" title="Comments" id="Question2" class="textarea" required></textarea>
</fieldset>
<p class="submit"><input name="btnSubmit" type="submit" value=" Submit Form "> <input type="reset" name="Reset" value=" Clear "></p>
</form>
</div>
</body>
</html>I removed your binding function to the form submit event and setted select inputs as required.
<html>
<body>
<form>
<input type="text" name="t1" id="t1" onkeyup="myFunction()">
<input type="submit" id="sbm" disabled>
<p id="para"></p>
</form>
<script>
function myFunction() {
var x = document.getElementById("t1").value;
var len=x.length
if(len>5&&len<10){
document.getElementById("sbm").disabled= false;
document.getElementById("para").innerHTML = "";
}
else{
document.getElementById("sbm").disabled= true;
if(len<=5){
document.getElementById("para").innerHTML = "too short";
}
else{
document.getElementById("para").innerHTML = "too big";
}
}
}
</script>
</body>
</html>
try this code. easiest way to do it
The form is submitted if the value of the textarea is more than 50. If not, it will alert and then return false, nothing will happen.
Check your other input element like this too.
function check() {
var textLength = document.getElementById('textarea').value.length;
var error = false;
if(textLength > 50){
error = false;
} else {
error = true;
}
if(error){
alert("Question #1 - You wrote " + textLength + " characters. Please write at least 50 characters for Question1");
return false;
} else {
return true;
}
};<form name="form">
<textarea id="textarea"></textarea>
<input type="submit" onClick="return check()" value="Check">
</form>