Question

我已经成功地使用了代码 jsfiddle.net/y3qayufu/2/验证一组字段但是如何在特定位置显示错误消息。我希望错误消息只在按下提交按钮后出现一次，最好是在组之上，但可能在下面。

而不是：

我想这样：

由于

Answer 1

使用提供的jQuery验证errorPlacement函数：

    $("#findproject_form").validate({
    rules: {
      ....
    },
    errorPlacement: function(error, element) {
        $('label.error').remove();
        error.insertAfter("#submit_btn");
    }
});

HTML：

     <div class="searchbg" id="submit_btn" style="margin-right:0px;">
          <input class="bgbttn" type="submit" name="submit" value="" />
     </div>

Answer 2

尝试提交你可以输入功能定义

var valid=0;
$(this).find('input[type=text], select').each(function(){
if($(this).val() != "") valid+=1;
});
if(valid==0)
{
$('#myDiv').html("please fil atleast one of these");
}

Answer 3

嗨，这是一个固定的小提琴http://jsfiddle.net/bayahiassem/sdx4ru4s/2/

如果您无法打开它，请在此处更新代码：

html 仅向h3添加了ID

<form id="findproject_form" method="post" action="{$BASE_URL}findproject">
    <div class="bgtrans">
        <h3 id="header">Search By</h3>

        <div class="div_bg1">
            <div class="searchbg">
                <div class="seachbginputbg">
                    <input class="seachbginput validategroup" type="text" placeholder="Profession" id="Profession" name="Profession" value="" />
                </div>
            </div>
            <div class="searchbg">
                <div class="seachbginputbg">
                    <input class="seachbginput validategroup" type="text" placeholder="Location" id="Location1" name="Location1" value="" />
                </div>
            </div>
            <div class="searchbg" style="margin-right:0px;">
                <div class="seachbginputbg">
                    <input class="seachbginput validategroup" type="text" placeholder="Company" id="Company" name="Company" value="" />
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="div_bg2">
            <div class="searchbg">
                <div class="seachbginputbg">
                    <input class="seachbginput validategroup" type="text" placeholder="Name" id="Name" name="Name" value="" />
                </div>
            </div>
            <div class="searchbg">
                <div class="seachbginputbg">
                    <input class="seachbginput validategroup" type="text" placeholder="Key Words" id="KeyWord" name="KeyWord" value="" />
                </div>
            </div>
            <div class="searchbg" style="margin-right:0px;">
                <input class="bgbttn" type="submit" name="submit" value="" />
            </div>
            <div class="clear"></div>
        </div>
    </div>
</form>

JS 使用errorPlacement：

$(document).ready(function () {

    jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
    });

    $("#findproject_form").validate({
        rules: {
            Profession: {
                require_from_group: [1, ".validategroup"]
            },
            Location1: {
                require_from_group: [1, ".validategroup"]
            },
            Company: {
                require_from_group: [1, ".validategroup"]
            },
            Name: {
                require_from_group: [1, ".validategroup"]
            },
            KeyWord: {
                require_from_group: [1, ".validategroup"]
            }
        },
        errorPlacement: function(error, element) {
        console.log(error[0].innerText);
            if(error[0].innerText == 'Please fill at least 1 of these fields.' && !errorshowed) {
            error.insertAfter("#header");
            errorshowed = true;
          }
        }
    });

    var errorshowed = false;

    $.validator.addMethod("require_from_group", function (value, element, options) {
        var $fields = $(options[1], element.form),
            $fieldsFirst = $fields.eq(0),
            validator = $fieldsFirst.data("valid_req_grp") ? $fieldsFirst.data("valid_req_grp") : $.extend({}, this),
            isValid = $fields.filter(function () {
                return validator.elementValue(this);
            }).length >= options[0];

        // Store the cloned validator for future validation
        $fieldsFirst.data("valid_req_grp", validator);

        // If element isn't being validated, run each require_from_group field's validation rules
        if (!$(element).data("being_validated")) {
            $fields.data("being_validated", true);
            $fields.each(function () {
                validator.element(this);
            });
            $fields.data("being_validated", false);
        }
        return isValid;
    }, $.validator.format("Please fill at least {0} of these fields."));

});

jQuery验证require_from_group错误消息位置

3 个答案: