[ACCEPTED]-How to check that a form has AT LEAST one field filled in-forms

Here is a function that should work with 4 all form field types: text, select, radio, checkbox, textarea, file, and HTML5 3 input types like email. The only assumption this 2 function makes is that all select elements have 1 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 ---

//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..} 

0

I'm not an expert, but this works for me. I 11 have a select field and an input field for 10 donations. If the amount isn't on the select 9 options, then the user can add an amount 8 into the input field. So at least one has 7 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 6 field needs to be numeric so I've added:

 function validateForm2() {

var 5 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 4 numerical check is called onkeyup:

onkeyup="validateForm2()"

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

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

0