Question

我正在尝试使用一些预先填充的数据来验证文本区域。

在编辑视图上，我有一个文本区域，在文本区域关闭标签之间有一些数据。

更新：注释是通过数组显示的，不确定如何编辑数组中的特定元素。

EJS（HTML）标记：

<div class="collapse" id="collapseEdit<%= comment._id %>">
    <div style="margin: 15px 0;">
      <form id="edit-comment-form<%= comment._id %>" action="/places/<%= campground._id %>/comments/<%= comment._id %>?_method=PUT" method="POST">
        <div class="edit-comment-container">

          <!--Textarea Input Field Problem-->
          <textarea class="comment-edit-input" id="comment-edit-inputfield" name="comment[text]" rows="5" cols="70"><%= comment.text %></textarea>

          <button class="button submit" id="comment-edit-button">Edit comment</button>
        </div>
      </form>
    </div>
</div>

我所做的事情：

要验证文本区域，我尝试检查null值，但是此输入不接受值，然后我修改了它的innerHTML检查，但这也不起作用。我不知道如何通过javascript对此进行验证，而且不，我不需要使用。

我要做什么：

我要做的就是如果textarea为空，则将disable属性添加到该字段并修改不透明度。如果该字段为空，则应执行与无效逻辑相反的操作。

这是我当前的javascript验证版本：

(() => {
    document.addEventListener("DOMContentLoaded", function(event) { 

        const editCommentInput = document.querySelector("#comment-edit-inputfield");     
        const editCommentButton = document.querySelector("#comment-edit-button");


        /* 
        Submit button logic:
        - By default the submit button is disabled so users cant just click the button and trigger the required message
        - The required atribute is there as a backup
        */
       editCommentButton.disabled = true;
       editCommentInput.required = true;

        const editCommentInputEvents = function () {
            if (editCommentInput.innerHTML == "") {
                editCommentButton.style.opacity = "0.5";
                editCommentButton.disabled=true ;
            } else {
                editCommentButton.style.opacity = "1";
                editCommentButton.disabled=false ;        
            }
        };

        /* 
        Event listerns for the comment input event:
        - Multiple events attached to the commentinput event
        - No need for Jquery
        - This could probably be improved 
        */
        window.addEventListener("keyup", editCommentInputEvents, false);
        window.addEventListener("keydown", editCommentInputEvents, false);
        window.addEventListener("keypress", editCommentInputEvents, false);
    });
})();

任何帮助将不胜感激：）

干杯

亚历克斯

如何使用预填充的数据验证文本区域？

0 个答案: