个人中心
gpt4 book ai didi

javascript - 评论字段中 Textarea 的表单验证

转载 作者：行者123 更新时间：2023-11-30 11:16:20 28 4
gpt4 key购买 nike

我正在尝试为 textarea 创建表单验证。它要求用户在评论框中输入最少的字符。如果他们输入的字符少于要求的最少字符数，那么当他们点击提交按钮时，就会显示错误。错误应该显示他们已经输入的字符数和消息。例如:问题 #1 - 你写了 n 个字符。请为问题 1 至少写 50 个字符。

目前，我将最小长度设置为 50 个字符，将最大长度设置为 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 ">&nbsp; &nbsp; <input type="reset" name="Reset" value=" Clear "></p>
</form> 
</div>
</body>
</html>

非常感谢!

最佳答案

您不应该使用 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 ">&nbsp; &nbsp; <input type="reset" name="Reset" value=" Clear "></p>
      </form>
    </div>
  </body>

</html>

我删除了您对表单提交事件的绑定(bind)功能，并根据需要设置了选择输入。

关于javascript - 评论字段中 Textarea 的表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51401682/

28 4 0
文章推荐： swift - CAGradientLayer 框架无法正确显示
文章推荐： java - 通用方法类型参数确定
文章推荐： javascript - react 滚动组件以查看溢出隐藏元素内部
文章推荐： java - 以编程方式更改 Eclipse 中的文件关联
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com