javascript - Iterate through all form elements irrespective of their type - Stack Overflow

admin管理员组

文章数量:1391947

I am busy with a form manager for one of our clients. The general idea is that forms will be built for the individual departments and I want to create a micro system which will handle validation etc for the form without redoing too much work. As automated as possible.

My first major task is that I want to on clicking the submit button, iterate through the entire form and based on specific credentials and validation rules validate the form before it gets sent to the server. I have seen a number of posts related to getting example all the input fields in a form, but I am looking for a solution which will iterate through the entire form and it's contents and then do validation on specifically all of the form elements (which includes select boxes, input boxes, text boxes etc).

I could do this separately, but I would preferably like the validation to be done top - bottom so if the first field is example a select and the next is an input field, it should iterate through the form from top to bottom so that I can output errors according to that.

// Sample code:
$(document).ready(function() {
    $("#main_submit").click(function() {
        // Select all of the form fields here and iterate through them ...
    });
});

<form name='test_form' method='POST' action=''>
    <div>
        <label for='title'>Title</label>
        <select name='title'>
            <option value=''>Please select ...</option>
            <option value='MR'>MR.</option>
        </select>
    </div>
    <div>
        <label for='full_name'>Full Name:</label>
        <input name='full_name' type='text' />
    </div>
    .....
</form>

I am busy with a form manager for one of our clients. The general idea is that forms will be built for the individual departments and I want to create a micro system which will handle validation etc for the form without redoing too much work. As automated as possible.

My first major task is that I want to on clicking the submit button, iterate through the entire form and based on specific credentials and validation rules validate the form before it gets sent to the server. I have seen a number of posts related to getting example all the input fields in a form, but I am looking for a solution which will iterate through the entire form and it's contents and then do validation on specifically all of the form elements (which includes select boxes, input boxes, text boxes etc).

I could do this separately, but I would preferably like the validation to be done top - bottom so if the first field is example a select and the next is an input field, it should iterate through the form from top to bottom so that I can output errors according to that.

// Sample code:
$(document).ready(function() {
    $("#main_submit").click(function() {
        // Select all of the form fields here and iterate through them ...
    });
});

<form name='test_form' method='POST' action=''>
    <div>
        <label for='title'>Title</label>
        <select name='title'>
            <option value=''>Please select ...</option>
            <option value='MR'>MR.</option>
        </select>
    </div>
    <div>
        <label for='full_name'>Full Name:</label>
        <input name='full_name' type='text' />
    </div>
    .....
</form>

• javascript
• jquery

Share Improve this question Follow edited Apr 28, 2018 at 7:32 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Feb 4, 2013 at 9:10 mauzillamauzilla 3,5921111 gold badges5555 silver badges8888 bronze badges 3

• Possible duplicate of How to loop through elements of forms with JavaScript? – Cœur Commented Apr 28, 2018 at 7:33
• Yeah sure could be, but mine was asked around 9 months before your link (asked Nov 14 '13 at 13:14) – mauzilla Commented Apr 30, 2018 at 6:08
• close vote retracted – Cœur Commented Apr 30, 2018 at 9:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use the jQuery :input selector:

jQuery("form :input");

Description: Selects all input, textarea, select and button elements.

http://api.jquery./input-selector/

Try this:

//loop through all input elements
$("form :input").each(function(){
    var thevalue = $(this).val();//the value of the current input element
    var thename = $(this).attr('name');//input name
    var thetype = $(this).attr('type');//input type
});

本文标签： javascriptIterate through all form elements irrespective of their typeStack Overflow