How can I set a minimum length for a field with jQuery?

Question

I have four email fields in a form, and I want that the user when using the submit button, it's required to fill out a minimum of one field.

This is the HTML:

<form id="new_invitation" class="new_invitation" method="post" data-remote="true" action="/invitations" accept-charset="UTF-8">
    <div id="invitation_form_recipients">
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_0"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_1"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_2"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_3"><br>
    </div>
    <input type="submit" value="Send invitation" name="commit">
</form>

How can I do it?

score 3 · Accepted Answer · answered Mar 05 '12 at 18:00

3

$('#new_invitation').submit(function(event) {
    if ($('#invitation_form_recipients input').filter(function() {
        return $(this).val();
    }).length == 0) {
        // all the fields are empty
        // show error message here

        // this blocks the form from submitting
        event.preventDefault();
    }


});

answered Mar 05 '12 at 18:00

ori

7,817
1
27
31

i think this will consider string "0" as an empty input, you may want to be more explicit with your filter condition. – jbabey Mar 05 '12 at 18:15
string '0' is ok (because `!!0 == false` but `!!'0' == true`), but sure, I'd add `!!` before the return value in the filter. – ori Mar 05 '12 at 18:19
Thank you, Im need to know if the email entered is a regex email. This not works for me :( – hyperrjas Mar 05 '12 at 18:42

score 1 · Answer 2 · answered Mar 05 '12 at 18:01

1

One way: concatenate the four values and if it's not blank then you're sure one of them has been filled in.

answered Mar 05 '12 at 18:01

Diodeus - James MacFarlane

112,730
33
157
176

score 0 · Answer 3 · edited Jan 20 '21 at 08:25

This should work:

<script type="text/javascript">
    function check_recipients(form){
        var empty = true;
        $('#invitation_form_recipients input').each(function(){
            if($(this).val() != ''){
                empty = false;
            }
        });
        if(empty){
            alert('You have to fill in at least one recipient!');
            return false;
        }
        else{
            form.submit();
        }
    }
</script>

<form id="new_invitation" class="new_invitation" onsubmit="check_recipients(this); return false;" method="post" data-remote="true" action="/invitations" accept-charset="UTF-8">
    <div id="invitation_form_recipients">
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_0"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_1"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_2"><br>
        <input type="text" value="" name="invitation[recipients][]" id="invitation_recipients_3"><br>
    </div>
    <input type="submit" value="Send invitation" name="commit">
</form>

How can I set a minimum length for a field with jQuery?

3 Answers3

Linked