jQuery make textboxes required based number of options selected from a select box

Hi Everyone,

I have a select box where a user can select how many charms he/she wants. Based on that select I showing textboxes where they enter the charm text. You can see that in my test site


In the above link by default one charm is selected and its textbox is shown below. I have a small JS code which checks if the textbox length and displays an alert box saying that the textbox is required.

The code also checks when there are multiple charms selected what I means is if you select 2 charms you will 2 textboxes and even if one of them is empty the alert box shows.

But for some reason my code is always showing the length is 1 even there is no text in the textbox, I am doing this on form submit. here is the code

<script type="text/javascript">
$(document).ready(function(){ $("#product_form").submit(function(e) {
var number_of_charms = $("#charm").prop("selectedIndex") + 1;
var fields_not_empty = $(":text[name^=Product_Attribute]:visible[value]").length;
if(number_of_charms > fields_not_empty) {
alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");

Open in new window

What am I doing wrong?

Thanks and appreciate it
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
this works:
    $("#product_form").submit(function(e) {
        var hasEmpty = false;
		var number_of_charms = $("#charm").prop("selectedIndex") + 1;
		$(":text[name^=Product_Attribute]:visible[value]").each(function() {
            if ($.trim($(this).val()) == '') {
                hasEmpty = true;
		if(hasEmpty) {
			alert("You left one or more required fields empty. Please check your selection above and adjust as needed.");
            return false;

Open in new window

Live sample:


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.