Как я могу установить минимальную длину для поля с JQuery?

Question

У меня есть 4 поля электронной почты в форме, и я хочу, чтобы пользователь при нажатии кнопки обязателен для заполнения минимум 1 поля.

Это 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>

Как я могу это сделать?

Answer 1

$('#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();
    }


});

Answer 2

Один способ: объединить четыре значения, и если они не пустые, то вы уверены, что одно из них заполнено.

Answer 3

Это должно работать:

<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>