Невозможно добавить обязательную проверку в текстовую область, используя CSS-подход или JQuery-Apprach

Question

Я добавил следующее на нашу страницу онлайн-сайта SharePoint (используя веб-часть редактора сценариев): -

<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> пустым?

Answer 1

Вы можете попробовать что-то вроде этого:

$( "#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

Answer 2

Этот атрибут 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) {
                    }
                });

        });