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

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>

我正在通过 class 名称 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

I want to get this message The ID field is required from nested span

$(element).next("span").children("span:first").text()

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 不显眼的验证以及查找和隐藏跨度

jQuery unobtrusive validation and finding and hiding span

jquery

unobtrusive-validation

CSS