javascript - 如何检查表格是否至少填写了一个字段

Question

我正处于构建网站的最后阶段，还有一个关键任务：设置一些表单验证，阻止用户提交空白搜索。

我知道以下帖子，但发现不清楚如何让它工作，以及如何将它用于下拉列表（jQuery Validate - 需要填写组中的至少一个字段）

关于我如何做到这一点的任何想法，或者任何可能有帮助的指南指针，将不胜感激？

Answer 1

这是一个适用于所有表单字段类型的函数：text、select、radio、checkbox、textarea、file和 HTML5 输入类型，如email. 这个函数所做的唯一假设是所有select元素都有一个optionwithvalue=""

/**
 * 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
    });
});​

这是一个演示：

--- jsFiddle 演示 ---

Answer 2

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.

Answer 3

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

Answer 4

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