Unable to add a Required Validation to a Text-area using CSS-Approach or JQuery-Apprach

Question

I have added the following to our SharePoint online site page (using the script editor web part):-

<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>

now I am trying to add a Required validation on the <textarea>..but now not sure why adding the required attribute did not work?

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

and users are able to submit the form while leaving the <textarea> empty?

DRich · Accepted Answer · 2018-10-26 15:43:28Z

1

That required attribute is only going to work in the context of a <form>.

Since you're doing this through JS, you'll need to do your validation manually. Try this:

    $( "#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) {
                    }
                });

        });

answered Oct 26, 2018 at 15:43

DRich

9721 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

John John Over a year ago

i thought of something similar to your appraoch,,, but i do not want to show popup/alerts i just need to color the field with red color and prevent the submission...

DRich Over a year ago

If you want the color to change you're going to need some more code. You'll need something that will set the color of the field. You'll probably want a css class for that. And you'll also want a function that changes the color back when someone enters text. Otherwise it'll look like the error just sticks around, even after they've corrected it.

Matthew Dewell · Accepted Answer · 2018-10-26 17:17:20Z

0

You could try something like this:

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

View it working here:

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

answered Oct 26, 2018 at 17:17

Matthew Dewell

5737 silver badges30 bronze badges

3 Comments

John John Over a year ago

currently your code has prevented the for from being submitted, but i can not see any red color applied to the textarea... not sure why

Matthew Dewell Over a year ago

@testtest I have used the online version of SharePoint, but I currently am not working with it now. Do you know if there is a way to setup a test site? I thought there was, but I haven't tried it, ... yet. I could play with the form and find out why the color is not changing. Sometimes it's a mandated theme that has to be over written, if I remember. Let me know. Thanks.

Matthew Dewell Over a year ago

@testtest Did the Stackblitz work for you? If so, we can get it working in SharePoint.

Collectives™ on Stack Overflow

Unable to add a Required Validation to a Text-area using CSS-Approach or JQuery-Apprach

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related