validating multiple controls in javascript

Question

I am adding multiple controls on an .aspx page from the .vb page based on certain conditions.

My code looks like following:

    Dim sb As New StringBuilder

    sb.Append("<table border='0'cellpadding='0' cellspacing='0' width='50%' class ='tabledata' id='tblContent'>")
    For Each item As myObject In myLst            
        sb.Append("<tr><td style='width:50%;' valign='top'>")
        sb.Append("<textarea id=txt_comments" & i & " name='txt_comments' rows='5' cols='60'></textarea></td>")
        sb.Append("<td style='width:15%' valign='top' align='center'><select ID = validate" & i & " name=ValidateValues style ='border:1;width:150px'><option value = ''>Select</option><option value = 'Yes'>Yes</option><option value = 'No'>No</option><br /><br /></td>")
                    sb.Append("</tr><tr>")
    Next
    sb.Append("</table>")
    myContent.InnerHtml = sb.ToString

So here I am creating <textarea> and <select> dynamically and adding them to my div(myContent)

 <div id="structuredContent" runat="server">
 </div>

I have a button next where I need to validate for few conditions.

My validation rule is:

User has to select either yes or no from the dropdown(<select>)
If user select 'yes', they have to enter text in
<textarea>(minimum1 character, maximum 1000 characters)
If user select 'No', <textarea> should be disabled.

I am trying to validate like following:

function validateComments() {           
        var errorcheck = 0;
         $("[id^=txt_comments]").each(function () {
            var comment = $.trim($(this).val());
            $("[id^=validate]").each(function () {
                debugger;
                var value = $(this).val();

                if (comment == 0 && value == "Yes") {
                    debugger;
                    errorcheck = 1;
                }


            });


        });            if (errorcheck == 1) {
             //show error message
            }
        else {
            ErrorHide();
            return true;
        }

    }

I am able to validate only for one control(which is textarea) from the above code.

The textbox and respective dropdown should be validated along.

How do I add validation for dropdown and can I combine with in the same function.

Any help?

Thanks in advance.

don't use an id (which selector would rather be #txt_comments), but use a defining classname — Icepickle
– Icepickle, Commented May 9, 2018 at 19:43
was the answer given now not up to your expectations? In how far was it not a help to you? As far as I can see it's a valid attempt in giving you insight how to do it, upon which you can build — Icepickle
– Icepickle, Commented May 11, 2018 at 17:54

Muhammad Usman · Accepted Answer · 2018-05-09 19:58:03Z

1

I don't know how do you expect this like if (comment == 0) { to work.

You'll always get a string as a value and checking it with 0 would always return false. Rather you need to check it with "".

And to enable/disable textarea you'll have to attach an event to select tag and do whatever you want to do.

here is an example

$("#d").change(function(){
   if($(this).val() === 'n'){
     $("#t").prop('disabled', 'disabled')
   }else{
    $("#t").prop('disabled', false)
   }

});
$('body').on('click', '#b', function() {
   var text = $.trim($("#t").val());
    if(text === "" && !$("#t").prop('disabled')){
     alert("yo! not valid") 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="d">
 <option value="0">Select</option>
 <option value="y">Yes</option>
 <option value="n">No</option>
</select>
<textarea maxlength="50" id="t"></textarea>\

<button id="b">Validate</button>

edited May 9, 2018 at 19:58

answered May 9, 2018 at 19:49

Muhammad Usman

10.1k26 silver badges41 bronze badges

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

8 Comments

Muhammad Usman Over a year ago

don't you see the alert ?

Santosh Over a year ago

This doesn't work if the dropdown has 'Select' as the first value

Muhammad Usman Over a year ago

@Santosh this is giving you an idea on how to put things on track. Anyways, I'll update that for you :)

Santosh Over a year ago

And I am adding the controls dynamically from .vb file. So I have to validate dynamically

Muhammad Usman Over a year ago

$('body').on('click', '#b', function() { this is way to check events on dynamically added elements. you can modify for select with this

|

Collectives™ on Stack Overflow

validating multiple controls in javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related