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?

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


});