获取字段集中所有jquery输入的值

Question

this is the first question i ask here. I have a fieldset which has inside 4 inputs. I want to validate the form if at least 2 of 4 are completed. I can get the value of the first input with $("#communications input").val() .

 <fieldset class="input-group-fieldset bigger-labels" id="communications">
    <div class="row">
        <div class="columns twelve">
            <div class="input-group" id="pref-mail-wrap">
                <label>Email Address</label>
                @Html.TextBoxFor(model => model.PrefferedEmail, new { @class = "contact-group" })

            </div>
        </div>
    </div>
    <div class="row">
        <div class="columns four">
            <div class="input-group" id="pref-phone-wrap">
                <label>Telephone No</label>
                @Html.TextBoxFor(model => model.PrefferedPhoneNo, new { @class = "contact-group" })



            </div>
        </div>
        <div class="columns four">
            <div class="input-group" id="pref-sms-wrap">
                <label>SMS No</label>
                @Html.TextBoxFor(model => model.PrefferedSmsNo, new { @class = "contact-group" })

            </div>
        </div>
    </div>
    <div class="" id="pref-address-wrap">

        <div class="row fixed-width">
            <div class="columns twelve">
                <div class="input-group2">
                    <label>Address </label>

                    @Html.TextBoxFor(model => model.PostalAddress)

                </div>
            </div>

        </div>

Thank you in advance, Kostas.

Answer 1

You should set name attribute for all these input elements, then serialize them and check it using:

if($('#communications :input').serializeArray().length >=2)

'#communications input' would be enough in your case

Answer 2

Use .filter() as below.

var $completedInputs = $("#communications input:text").filter(function() {
    //return the ones witn non-empty values
    return $.trim(this.value) != "";
});

if ($completedInputs.length >= 2) {
    //At least 2 inputs have been filled.   
}

$("#communications input:text") or $("#communications :text") => All inputs whose type is text

$("#communications input") => All inputs

Answer 3

you can use jquery each() for selectors returning more then 1 elements:

$("#communications input").each(function(){
   // $(this).val(); check here what you want.
})

Answer 4

Try something like this.

var count = 0;
$('#communications input').each(function(index, item) {
    if($(item).val()!=="") {
        count ++;
    }
    return count <= 2; // break; if more than 2 have values
    });

if(count >= 2) {
    //valid
}

Read more at: https://api.jquery.com/each/

Answer 5

You can use filter() to check how many of the inputs have been given a value. Try this:

var validInputs = $("#communications input").filter(function() {
    return !$(this).val().trim() == '';
}).length;

if (validInputs < 2) {
    // form is invalid...
}

Answer 6

If all the inputs have the same format and the validation is the same try to iterate through all the inputs within the fieldset

$("#communications input").each(function(i,v){

});

Otherwise you should validate the 4 inputs individually.