我正在尝试为textarea创建一个表单验证。它要求用户在注释框中输入最小字符。如果他们输入的字符数少于要求的最小字符数，则当他们单击Submit按钮时，它将显示错误。该错误应显示他们已经输入的字符数和消息。例如：问题＃1-您写了n个字符。请为问题1至少写50个字符。
当前，我将minlength设置为50个字符，并将maxlength设置为500个字符。但是，它不起作用。
有人可以帮助我吗？
这是我的代码：
<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 complete 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 comment 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 comment 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>
非常感谢您！
答案 0 :(得分：1)
如果textarea的值大于50，则提交表单。如果不超过50，它将发出警报，然后返回false，将不会发生任何事情。
同样检查您的其他输入元素。
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>
答案 1 :(得分：1)
<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>
尝试此代码。最简单的方法
答案 2 :(得分：1)
您不应该使用JavaScript来验证表单，也请不要使用alert（）向用户传递消息：这确实很烦人。您应该使用本机HTML5表单验证属性，错误消息将自动显示。
<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>
我删除了对表单提交事件的绑定功能，并根据需要设置了选择输入。