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?

ori · Accepted Answer · 2012-03-05 18:00:24Z

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 5, 2012 at 18:00

ori

7,8471 gold badge29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jbabey Over a year ago

i think this will consider string "0" as an empty input, you may want to be more explicit with your filter condition.

ori Over a year ago

string '0' is ok (because !!0 == false but !!'0' == true), but sure, I'd add !! before the return value in the filter.

hyperrjas Over a year ago

Thank you, Im need to know if the email entered is a regex email. This not works for me :(

Diodeus - James MacFarlane · Accepted Answer · 2012-03-05 18:01:08Z

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

Peter Mortensen · Accepted Answer · 2021-01-20 08:25:06Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Linked

Related