Javascript validate X number of fields in an HTML form

Question

I have a form, that has about 10 text entries (user, address, email etc;) and about 50+ entries that are quantity entries (users select 2x of this item, 5x of this item).

Now I inherited this form from someone else (now its my duty to keep it up to date, when the customer requests it).

I don't want to re-write it all, but I would like to add validation for the quantity fields.

Now the quantity fields are all named different things (b1,c55,d,12)

Basically I would like to write a script (but don't know how to search for this, or accomplish this) JS side, that would ignore the tags I know (user, address, email etc;) but check if the others are numbers (either empty - not selected, or 1-99)

Can you add script references to any of the JavaScript libraries out there? Eg jQuery? — Crescent Fresh
– Crescent Fresh, Commented Oct 26, 2009 at 19:23
What would be the point of referencing a js lib? I don't use one for this form. But if someone wants to use one in their suggestion, I would welcome it. However I don't see how it will clarify my question. — Jakub
– Jakub, Commented Oct 26, 2009 at 19:24
@Jakub: I wasn't asking for you to clarify anything, just asking for those who may have a solution using a particular library. — Crescent Fresh
– Crescent Fresh, Commented Oct 26, 2009 at 19:30

Josh Leitzel · Accepted Answer · 2009-10-26 19:55:06Z

2

Apply a class to the elements (my code uses a class check) like so:

<input type="text" name="b1" class="check" />

and the following jQuery code, which will only check those elements with the check class.

$('#myformid').submit(function(){
    $(':input.check').each(function(){
        field = $(this);
        valInt = parseInt(field.val()); // value as an integer

        if (isNaN(valInt) || (valInt < 1 || valInt > 99)) // displays an error if the val is < 1 or > 99
             alert('Error in the field ' + field.attr('name') + ': must be number from 1-99'); // change this to whatever you want the form to do if there's an error
    });
});

Basically what this does is the following: when the form is submitted, it goes through every field you'd like it to (denoted :input.class to catch each field with the correct class) and checks if it's (a) a number, and (b) less than 1 or greater than 99. If it's a number and is outside the range, it alerts the user of an error. You can change the alert() notification to whatever error management you'd like your form to have.

edited Oct 26, 2009 at 19:55

answered Oct 26, 2009 at 19:39

Josh Leitzel

15.2k13 gold badges61 silver badges77 bronze badges

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

3 Comments

Jakub Over a year ago

@Josh Leitzel: However, if I don't want to define each name? I have 50+ entries, and I don't care for their name, I just want to make sure that they are 1-99, or empty. As these values change on a weekly basis, I don't want to keep updating this script. So I would need jQuery to go through all the form elements? How would I accomplish that? What I picture is loop through like an array, and ignore the 'known' (email, first, last, etc). Appologies if I wasn't too clear.

Josh Leitzel Over a year ago

Sorry about that. You can use a CSS class to easily accomplish what you'd like to do. I've edited my answer accordingly.

Jakub Over a year ago

ahh, smart. I didn't even think to group by class. Thank you very much!

Collectives™ on Stack Overflow

Javascript validate X number of fields in an HTML form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest