Question

这是我的样本html

<td>
    <input type="text" value="1" name="Students[0].ID" id="Students_0__ID" data-val-required="The ID field is required." data-val-number="The field ID must be a number." data-val="true" title="Error...">
    <span data-valmsg-replace="true" data-valmsg-for="Students[0].ID" class="text-danger field-validation-error">
        <span for="Students_0__ID" class="">The ID field is required.</span></span>
</td>

我找到了班级名field-validation-error的范围并试图隐藏。

我也希望从嵌套范围中获取此消息The ID field is required。

这是我的代码无效。无法找到范围field-validation-error。

这是我试过的代码。

$.validator.setDefaults({
    highlight: function (element) {
        alert($(element).attr('id'));
        $(element).closest('.field-validation-error').hide();
        $(element).attr('title', 'Error...');   //do your custom error displaying here
    },
    unhighlight: function (element) {
        //hide your custom error here
        //alert($(element).attr('id'));
    },
    ignore: [],
});

此ID Students[0].ID存储到element。寻求帮助。感谢

Answer 1

尝试用.next()代替.closest()

$(element).next(/* selector */).hide();

Answer 2

我希望从嵌套范围
获取此消息$(element).next("span").children("span:first").text()

f(x)

http://jsfiddle.net/4dwecopx/

Answer 3

我用这种方式完成了这项工作。只需过度不引人注意的验证showErrors function即可完成工作。这是我的完整代码。

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnSubmit').click(function () {
            var $form = $('form');
            if ($form.valid()) {
                alert("val Ok");
            }
            else {
                alert("val fail");
            }
            return false;
        });
    });

    (function ($) {
        var classes = { groupIdentifier: ".form-group", error: 'has-error', success: null };//success: 'has-success' 
        function updateClasses(inputElement, toAdd, toRemove) {
            var group = inputElement.closest(classes.groupIdentifier);
            if (group.length > 0) {
                group.addClass(toAdd).removeClass(toRemove);
            }
        }
        function onError(inputElement, message) {
            updateClasses(inputElement, classes.error, classes.success);

            var options = { html: true, placement: 'bottom', title: '<div class="tooltip-alert alert-danger" data-placement="bottom">' + message + '</div>' };
            $(inputElement).addClass('validation-error');
            inputElement.tooltip("destroy")
                .addClass("error")
                .tooltip(options);
        }
        function onSuccess(inputElement) {
            updateClasses(inputElement, classes.success, classes.error);
            inputElement.tooltip("destroy");
            $(inputElement).removeClass('validation-error');
        }

        function onValidated(errorMap, errorList) {
            $.each(errorList, function () {
                onError($(this.element), this.message);
            });

            if (this.settings.success) {
                $.each(this.successList, function () {
                    onSuccess($(this));
                });
            }
        }

        $(function () {
            $('form').each(function () {
                var validator = $(this).data('validator');
                validator.settings.showErrors = onValidated;
            });
        });
    }(jQuery));
</script>

CSS

<style type="text/css">
.validation-error
{
    background: #FEF1EC;
    border: 1px solid #CD0A0A;
}

.tooltip-inner {
    max-width: 300px;
    padding: 0;
    border: solid 1px #ccc;
    background-color: #f00;
}
.tooltip-alert{
    padding: 8px 10px;
    font-weight: bolder;
    color: white;
    background-color: #f00;
} 

.tooltip-arrow { border-bottom-color:black; }


</style>

jQuery不显眼的验证，查找和隐藏跨度

3 个答案:

CSS