CODEWITHSUNDEEP
jqueryvalidationtextarea
Tan
Tan

Reputation: 788

jquery validating multiple textarea function

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

Upvotes: 0

Views: 1735

Answers (3)

Karthikeyan Sankar
Karthikeyan Sankar

Reputation: 1

 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>

Upvotes: 0

Vivin Paliath
Vivin Paliath

Reputation: 95508

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.

Upvotes: 1

ayyp
ayyp

Reputation: 6598

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;
      });
});

Upvotes: 0

Related Questions