Question

仅使用jQuery（不是验证插件）我已经设计了一种方法来做一个＆＃34;如果一个，那么所有＆＃34;要求，但它并不优雅。

我想知道是否有人可以提出更优雅的解决方案？这个使用了一些循环嵌套，我真的不满意。

if ($("[data-group]")) {
    //Store a simple array of objects, each representing one group.
    var groups = [];
    $("[data-group]").each(function () {
        //This function removes an '*' that is placed before the field to validate
        removeCurError($(this));
        var groupName = $(this).attr('data-group');
        //If this group is already in the array, don't add it again
        var exists = false;
        groups.forEach(function (group) {
            if (group.name === groupName)
                exists = true;
        });
        if (!exists) {
            var groupElements = $("[data-group='" + groupName + "']");
            var group = {
                name: groupName,
                elements: groupElements,
                trigger: false
            }
            group.elements.each(function () {
                if (!group.trigger) {
                    group.trigger = $(this).val().length !== 0;
                }
            });
            groups.push(group);
        }
    });
    //Now apply the validation and alert the user
    groups.forEach(function (group) {
        if (group.trigger) {
            group.elements.each(function () {
                //Make sure it's not the one that's already been filled out
                if ($(this).val().length === 0)
                    // This function adds an '*' to field and puts it into a
                    // a sting that can be alerted
                    appendError($(this));
            });
        }
    });

Answer 1

您不必将组存储在数组中，只要在要验证$元素时调用validateGroups函数即可。这是一个工作示例http://jsfiddle.net/BBcvk/2/。

HTML

<h2>Group 1</h2>
<div>
    <input data-group="group-1" />
</div>
<div>
    <input data-group="group-1" />
</div>
<h2>Group 2</h2>
<div>
    <input data-group="group-2" value="not empty" />
</div>
<div>
    <input data-group="group-2" />
</div>
<div>
    <input data-group="group-2" />
</div>
<button>Validate</button>

的Javascript

function validateGroups($elements) {
    $elements.removeClass('validated');
    $elements.each(function() {

        // Return if the current element has already been validated.
        var $element = $(this);
        if ($element.hasClass('validated')) {
            return;
        }

        // Get all elements in the same group.
        var groupName = $element.attr('data-group');
        var $groupElements = $('[data-group=' + groupName + ']');
        var hasOne = false;

        // Check to see if any of the elements in the group is not empty.
        $groupElements.each(function() {
            if ($(this).val().length > 0) {
                hasOne = true;
                return false;
            }
        });

        // Add an error to each empty element if the group
        // has a non-empty element, otherwise remove the error.
        $groupElements.each(function() {
            var $groupElement = $(this);
            if (hasOne && $groupElement.val().length < 1) {
                appendError($groupElement);
            } else {
                removeCurError($groupElement);
            }
            $groupElement.addClass('validated');
        });
    });
}

function appendError($element) {
    if ($element.next('span.error').length > 0) {
        return;
    }
    $element.after('<span class="error">*</span>');
}

function removeCurError($element) {
    $element.next().remove();
}

$(document).ready(function() {

    $('button').on('click', function() {
        validateGroups($("[data-group]"));
    });

});

Answer 2

你可能会从这个解决方案中获得一些改进。基本上，在发送表单之前简化并测试您提交点击的解决方案（这不做）。在这种情况下，我只是测试第一个真值复选框的值，然后提醒或检查所需的框。这些可以是你喜欢的任何东西。祝你好运。

http://jsfiddle.net/YD6nW/1/

<form>    
    <input type="button" onclick="return checkTest()" value="test"/>
</form>

和jquery：

checkTest = function(){

    var isChecked = $('input')[0].checked;

    if(isChecked){
        alert('form is ready: input 0 is: '+isChecked);
    }else{
        $('input')[1].checked = true;
        $('input')[2].checked = true;
    }    
};

//create a bunch of checkboxes
$('<input/>', {
    type: 'checkbox',
    html: 'tick'
}).prependTo('form');

$('<input/>', {
    type: 'checkbox',
    html: 'tick'
}).prependTo('form');

$('<input/>', {
    type: 'checkbox',
    html: 'tick'
}).prependTo('form');

Javascript验证 - 组验证 - 如果输入，则全部需要

2 个答案: