无法使用 CSS-Approach 或 JQuery-Apprach 向文本区域添加必需的验证

Posted 2023-05-09

【中文标题】无法使用 CSS-Approach 或 JQuery-Apprach 向文本区域添加必需的验证

【英文标题】：Unable to add a Required Validation to a Text-area using CSS-Approach or JQuery-Apprach

【发布时间】：2019-03-31 09:46:17

【问题描述】：

我已将以下内容添加到我们的 SharePoint 在线网站页面（使用脚本编辑器 Web 部件）：-

<div id= "s">
<form >
  <b>Name</b><br>
  <input type="text" id="NameDept" >
  <br>
  <b>Message</b><br>
  <textarea rows="4" cols="50" id="Custommessage" required></textarea>
  <br><br>
  <input type="submit" value="Submit" id= "feedbackbutton">
</form>
</div>

<script>
   $( "#feedbackbutton" ).click(function(e)  
    e.preventDefault();
   var namedept = document.getElementById("NameDept").value; 
   var Custommessage = document.getElementById("Custommessage").value; 
   var itemType = GetItemTypeForListName("mylist");
        var item = 
            "__metadata":  "type": itemType ,
            "Title": namedept ,
            "CommentBoxComment": Custommessage
        ;

        $.ajax(
           //code goes here..
            ,
            success: function (data) 
                $( "#s" ).replaceWith( "<span style='color:green'> submitted...</span>" );
            ,
            error: function (data) 
            
        );

);

 function GetItemTypeForListName(name) 
        return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
    
    </script>

现在我正在尝试在 <textarea>.. 上添加必需的验证，但现在不确定为什么添加 required 属性不起作用？

 <textarea rows="4" cols="50" id="Custommessage" required></textarea>

并且用户可以在将<textarea>留空的情况下提交表单吗？

【参考方案1】：

required 属性只能在 <form>. 的上下文中工作

由于您是通过 JS 执行此操作，因此您需要手动进行验证。试试这个：

    $( "#feedbackbutton" ).click(function(e)  
            e.preventDefault();
           var namedept = document.getElementById("NameDept").value; 
           var Custommessage = document.getElementById("Custommessage").value; 
           var itemType = GetItemTypeForListName("mylist");
                var item = 
                    "__metadata":  "type": itemType ,
                    "Title": namedept ,
                    "CommentBoxComment": Custommessage
                ;

           if(Custommessage.trim() === '') 
               alert("You must enter a comment to submit feedback");
               return; //<--- This will prevent the ajax call if the Custommessage textarea is blank or only contains whitespace
           
                $.ajax(
                   //code goes here..
                    ,
                    success: function (data) 
                        $( "#s" ).replaceWith( "<span style='color:green'> submitted...</span>" );
                    ,
                    error: function (data) 
                    
                );

        );

【讨论】：

我想到了与您的方法类似的东西，但是我不想显示弹出窗口/警报我只需要用红色为字段着色并阻止提交...

如果你想改变颜色，你需要更多的代码。你需要一些可以设置字段颜色的东西。你可能需要一个 CSS 类。而且您还需要一个在有人输入文本时将颜色变回的功能。否则，即使他们纠正了错误，错误也会一直存在。

【参考方案2】：

你可以试试这样的：

$( "#feedbackbutton" ).click(function(e)  
  e.preventDefault();
  var namedept = document.getElementById("NameDept").value; 
  var Custommessage = document.getElementById("Custommessage").value; 
  var itemType = GetItemTypeForListName("mylist");
  var item = 
    "__metadata":  "type": itemType, 
                    "Title": namedept ,
                    "CommentBoxComment": Custommessage
    
  ;

  if(Custommessage.trim() === '') 
    $("#Custommessage").css("background-color", "rgb(256, 0, 0, 0.5)");
    $("#Custommessage").attr("placeholder", "Please enter value here");

  // reset textarea once clicked again
  $("#Custommessage").click(function() 
    $("#Custommessage").css("background-color", "white");
    $("#Custommessage").attr("placeholder", "");
    return;
  );

    return; //<--- This will prevent the ajax call if the Custommessage textarea is blank or only contains whitespace
  

  $.ajax(
      //code goes here..
    ,
    success: function (data) 
      $( "#s" ).replaceWith( "<span style='color:green'> submitted...</span>" );
    ,
      error: function (data) 
    
  );

);

function GetItemTypeForListName(name) 
  return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";

在这里查看它的工作原理：

https://stackblitz.com/edit/js-5q4zn2

【讨论】：

目前您的代码已阻止提交 for，但我看不到任何红色应用于 textarea...不知道为什么

@testtest 我使用了 SharePoint 的在线版本，但我目前没有使用它。你知道有没有办法设置一个测试站点？我以为有，但我还没有尝试过，......还没有。我可以玩弄表格并找出颜色没有变化的原因。如果我记得的话，有时这是一个必须重写的强制性主题。让我知道。谢谢。

@testtest Stackblitz 对你有用吗？如果是这样，我们可以让它在 SharePoint 中运行。