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?

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?

• javascript
• jquery
• forms

• 2 Also please make sure you validate on the serverside. – PeeHaa Commented Aug 22, 2012 at 16:18
• 2 Something like if($('#your-form input,#your-form select').filter(function (el) {return $(el).val() != '';}).length > 0) {/* validation passed */} , perhaps? – Snowball Commented Aug 22, 2012 at 16:22

4 Answers 4

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

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

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.

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