How to check that a form has AT LEAST one field filled in

Question

I'm in the final stages of building a site and have one key task left: To setup some form validation that stops users being able to submit a blank search.

I'm aware of the following post, but have found this unclear on how to get it to work, and how to use this for dropdown's (jQuery Validate - require at least one field in a group to be filled)

Any ideas on how I can do this, or any pointers to a guide that may help, will be massively appreciated?

Something like `if($('#your-form input,#your-form select').filter(function (el) {return $(el).val() != '';}).length > 0) {/* validation passed */} `, perhaps? — Snowball, Aug 22 '12 at 16:22

score 13 · Accepted Answer · answered Aug 22 '12 at 17:12

Here is a function that should work with all form field types: text, select, radio, checkbox, textarea, file, and HTML5 input types like email. The only assumption this function makes is that all select elements have an option with value=""

/**
 * 1) gather all checkboxes and radio buttons
 * 2) gather all inputs that are not checkboxes or radios, and are not buttons (submit/button/reset)
 * 3) get only those checkboxes and radio buttons that are checked
 * 4) get only those field elements that have a value (spaces get trimmed)
 * 5) if the length of both resulting collections is zero, nothing has been filled out
 */
function checkFields(form) {
    var checks_radios = form.find(':checkbox, :radio'),
        inputs = form.find(':input').not(checks_radios).not('[type="submit"],[type="button"],[type="reset"]'),
        checked = checks_radios.filter(':checked'),
        filled = inputs.filter(function(){
            return $.trim($(this).val()).length > 0;
        });

    if(checked.length + filled.length === 0) {
        return false;
    }

    return true;
}

$(function(){
    $('#myForm').on('submit',function(){
        var oneFilled = checkFields($(this));
        // oneFilled === true if at least one field has a value
    });
});

Here is a demo:

--- jsFiddle DEMO ---

Hi @jackwanders, that's really helpful, thanks. I've now got that script checking the form successfully. This may seem like a simple question, but how do I tell the script to allow the submit button to sumbit the search once at least on field has been filled out? — Tom Perkins, Aug 23 '12 at 09:58
I've now got the submit button working again by reading [this](http://stackoverflow.com/questions/1164132/how-to-reenable-event-preventdefault) post. I simply added a line `$(this).unbind('submit').submit()` to take place if at least one field is filled in. The only problem is that it seems that the submit button now requires two clicks. One to add the default functionality to the button, and another to actually submit the form. Any ideas? — Tom Perkins, Aug 23 '12 at 10:12
No need to unbind and re-submit the form. I assume you're asking how the form can go to the page indicated in the form's `action` attribute? If the form's `submit` handler returns false, the form will not continue submitting. If it returns true, the form's action will be executed. — jackwanders, Aug 23 '12 at 13:15

score 1 · Answer 2 · edited Aug 22 '12 at 16:41

1

//select all text inputs in form and filter them based on...
var isFilled = $('input[type="text"]', 'form').filter(function() {
    return $.trim(this.value).length;  //text inputs have a value
}).length;                             //get the selector length

//if selector contains at least one filled in text input, submit form
if (isFilled) {..submit form..}

edited Aug 22 '12 at 16:41

Sparky

98,165
25
199
285

answered Aug 22 '12 at 16:36

adeneo

312,895
29
395
388

score 1 · Answer 3 · answered Mar 28 '13 at 19:42

I'm not an expert, but this works for me. I have a select field and an input field for donations. If the amount isn't on the select options, then the user can add an amount into the input field. So at least one has to be submitted.

    function validateForm() {  
if (  myform.mySelectfield.value == "" 
    && myform.myInputfield2.value == "" 
    ) {
alert( "Please enter at least field" );
     return false;    
     }   
     } 
//-->

And of course the input field needs to be numeric so I've added:

 function validateForm2() {

var x=document.forms["myform"]["myInputfield2"].value;

if (/[^0-9]+$/.test(x))
    {
    alert("Please enter a numerical amount without a decimal point");
    myform.myInputfield2.focus();
    return false;
  }

}

The numerical check is called onkeyup:

onkeyup="validateForm2()"

I had to make a second function validateForm2(), because the numerical check didn't work in with the first one.

score 0 · Answer 4 · answered Aug 22 '12 at 16:49

var filled = $('.property-list input[type="text"]').filter(function() {
    var v = $(this).val();
    // sanitize it first
    v = v.replace(/[\s]{2,}/g,' ').replace(/^\s*(.*?)\s*$/,'$1');
    $(this).val(v);
    // if you want it to contain min.
    // 3 consecutive alphanumeric chars, for example...
    return /[a-z0-9]{3,}/i.test(v);
}).get();
if (filled.length) {
    // do whatever with the result
    alert('all okay');
} else {
    $('.property-list input[type="text"]').focus().blur();
    // this is for the placeholders to refresh, at least in Safari...
    $('.property-list input[type="text"][value!=""]:first').focus();
    var msg = 'plase fill at least one field with min. 3 ';
    msg += 'consecutive alphanumeric characters';
    alert(msg);
}

How to check that a form has AT LEAST one field filled in

4 Answers4

Linked