ASP.NET DataList - JavaScript Validation Of All Textboxes

Question

Simple setup: Shopping Cart in the form of a data list.

Header has two buttons: Update Quantities and Remove Selected Items

Each DataList Item has (among other things) a textbox with the id="txtQty" that stores the quantity of the shopping cart item.

The user should be able to change the values in these textboxes and then hit the Update Quantities button in the header to save all the changes at one time.

I have the logic done for the actual saving, but now I am going back to add some extra validation. I was hoping to call a single JavaScript function from the OnClientClick event of the UpdateQuantities button, which would then iterate through all the DataListItems, find the txtQty textbox, and make sure it is valid numerical input.

I am having a bit of difficulty figuring out the best way of going about this. So far my only real idea would be to loop through the form elements and find anything with an id that matches "txtQty" (since ASP.NET rewrites the id's automatically), and then validating that specific element. This doesn't sound like the best solution. Are there any better ideas floating around out there?

Answer 1

Why not put a validator on your DataGrid to check to see if the qty is a valid number? This would be the simplest by far.

If that isn't a solution, I would have all those txtQty textboxes have the same css class. Then you can use JQuery to find all the elements with that class name and loop through them. Which is far better than looping through the entire form and checking if the id of the element contains 'txtQty' in its id.

Another way, is to have a hidden field that would have all ids of the textboxes you want to check. You would add to this hidden field as the text boxes are added. Then just break out the hidden field in an id array, and find just those ids.

Answer 2

Duplicate ID's really aren't a good thing. You could try assigning a class to the textbox - "validate-quantity" would be good, because you can apply multiple classes as validation rules.

<input type="textbox" class="validate-quantity validate-min" />

That way you could iterate through the form looking for your validation rules, instead of targeting a specifically a textbox.

Answer 3

I ended up using a bit of LongHorn's method to get my desired results. Using a custom validator I used the client-side validation ability of it to call a JS function which checked the individual textbox on text change event.

It wasn't my ideal solution, but it was useful. I also have the server-side validation occuring for the whole list before any processing occurs just in case as well.

Answer 4

why wouldn't you just add the validation as an attribute on the onchange event of each of the textboxes. You're better off doing the validation when they make the change.

You can either add a validation control or roll your own.