jquery validating multiple textarea function

Question

I have a form with tabs about profile, in the about section I have textareas on which I have to perform validation. how to validate on the save button click, I don't want to validate every single textarea like the code below

$(document).ready(function () { $("#btnSaveMyChanges").click(function () {

            var valid = true;
            if ($("#txtAboutMySelf").val() == "") {
                $("#ErrorAboutMySelf").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtAboutMyMatch").val() == "") {
                $("#ErrorAboutMyMatch").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtWhatIamDoing").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtIamReallyGood").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtTheSixThings").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtISpendaLot").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtTheFirstThings").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtOnaTypicalFriday").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            if ($("#txtMyFriendsDescribe").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            }
            return valid;
        });
    });

make a function and then on save click iterate through the form get all the text areas and then perform the required field validation and as well on the keyup event I need the maxlength to be 500 for every text area

You could also check for validation plugin: docs.jquery.com/Plugins/validation — Pehmolelu
– Pehmolelu, Commented Jul 29, 2011 at 19:03

Vivin Paliath · Accepted Answer · 2011-07-29 16:47:19Z

1

Try something like this:

var valid = true;
jQuery("#errmsg").html(""); //clear error messages first

jQuery("textarea").each(function() {
   if(jQuery(this).val() == "") {

      var errorText = "invalide";
      var id = jQuery(this).attr("id");

      if(id == "txtAboutMySelf" || id == "txtAboutMyMatch") {
          errorText = "This Field is Required.";
      }

      var $errMsg = jQuery("#errmsg");
      $errMsg.html($errMsg.html() + "<br />" + errorText); //you can't tell which error message belongs to what though; the same problem exists in your original solution.
      valid = false;
   }
});

You will need to figure out a way to provide context to your error messages. That is, you need to pair up the error messages with the elements. You can do this by creating an error-message div or span next to each element and then populating that when you have errors.

edited Jul 29, 2011 at 16:47

answered Jul 29, 2011 at 16:41

Vivin Paliath

95.8k42 gold badges230 silver badges302 bronze badges

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

4 Comments

ayyp Over a year ago

This works better than mine. What about the first two though? They return two separate values that are different from not only each other, but the other value returned.

Vivin Paliath Over a year ago

@Andrew, I've added an if statement that checks for the id of the textarea. If it matches txtAboutMyself or txtAboutMyMatch, the error message is different.

Tan Over a year ago

what i meant from my question is that i need a common function which should check the all my textareas for required and maxlength on button click if the validation is true then call submitchanges() method.

Vivin Paliath Over a year ago

@Tan this function checks all textareas and makes sure that they are filled out. You can easily add the maxlength check to what I've already given you. On SO we generally don't write out your entire solution for you, but we do point you in the right direction.

ayyp · Accepted Answer · 2011-07-29 16:44:29Z

0

I believe you could do something like this:


$(document).ready(function () { 
      $("#btnSaveMyChanges").click(function () {
            var valid = true;
            if ($("#txtAboutMySelf").val() == "") {
                $("#ErrorAboutMySelf").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtAboutMyMatch").val() == "") {
                $("#ErrorAboutMyMatch").html("This Field is Required.");
                valid = false;
            }
            if ($("#txtWhatIamDoing, #txtIamReallyGood, #txtTheSixThings, #txtISpendaLot, #txtTheFirstThings, #txtOnaTypicalFriday, #txtMyFriendsDescribe").val() == "") {
                $("#errmsg").html("invalide");
                valid = false;
            return valid;
      });
});

answered Jul 29, 2011 at 16:44

ayyp

6,5984 gold badges35 silver badges47 bronze badges

1 Comment

Tan Over a year ago

what i meant from my question is that i need a common function which should check the all my textareas for required and maxlength on button click if the validation is true then call submitchanges() method.

Karthikeyan Sankar · Accepted Answer · 2018-06-08 08:41:31Z

0

 Try this code

var clientdesc = $("textarea[name='client_desc[]']");

for(i = 0; i < clientdesc.length; i++){
     if(clientdesc[i].value.trim() == ""){
         document.getElementById('errormsg').innerHTML = 'error msg';
         clientdesc[i].focus();
         return false;
     }
 }


<textarea class="form-control" style="margin-bottom: 20px;" id="client_desc" name="client_desc[]" > </textarea>

<textarea class="form-control" style="margin-bottom: 20px;" id="client_desc" name="client_desc[]" > </textarea>

answered Jun 8, 2018 at 8:41

Karthikeyan Sankar

12 bronze badges

1 Comment

Lovepreet Singh Over a year ago

There should be some explanation with answer to understand it better.

Collectives™ on Stack Overflow

jquery validating multiple textarea function

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related