jQuery不引人注目的验证、查找和隐藏span

这是我的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>

---

此id

学生[0]。id

存储到

元素中。正在寻求帮助。谢谢
试着用
.next（）
替换
.closest（）

尝试将
.next（）
替换为
.closest（）

我想从嵌套的span获取此消息
ID字段是必需的


我想从嵌套的span获取此消息
ID字段是必需的

我是这样做的。只需通过不引人注目的验证
淋浴器功能
即可完成工作。这是我的全部代码

<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>


$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（）{
变量$form=$（'form'）；
如果（$form.valid（））{
警报（“val正常”）；
}
否则{
警报（“val故障”）；
}
返回false；
});
});
（函数（$）{
var classes={groupIdentifier:“.form group”，错误：'has error'，成功：null}；//成功：'has success'
函数更新类（inputElement、toAdd、toRemove）{
var group=inputElement.closest（classes.groupIdentifier）；
如果（组长度>0）{
addClass（toAdd）.removeClass（toRemove）；
}
}
函数onError（输入元素、消息）{
UpdateClass（inputElement，classes.error，classes.success）；
var options={html:true，位置：'bottom'，标题：'+message+'''}；
$（inputElement）.addClass（'validation-error'）；
inputElement.工具提示（“销毁”）
.addClass（“错误”）
.工具提示（选项）；
}
函数onSuccess（inputElement）{
UpdateClass（inputElement，classes.success，classes.error）；
工具提示（“销毁”）；
$（inputElement）.removeClass（'validation-error'）；
}
功能已验证（错误映射、错误列表）{
$.each（错误列表，函数（）{
onError（$（this.element），this.message）；
});
if（this.settings.success）{
$.each（此.successList，函数（）{
成功（$（此））；
});
}
}
$（函数（）{
$（'form'）。每个（函数（）{
var validator=$（this.data（'validator'）；
validator.settings.rors=onValidated；
});
});
}（jQuery））；

CSS

.验证错误
{
背景：#FEF1EC；
边框：1px实心#CD0A0A；
}
.工具提示内部{
最大宽度：300px；
填充：0；
边框：实心1px#ccc；
背景色：#f00；
}
.工具提示警报{
填充：8px 10px；
字体大小：粗体；
颜色：白色；
背景色：#f00；
} 
.tooltip箭头{边框底部颜色：黑色；}
我是这样做的。只需通过不引人注目的验证
淋浴器功能
即可完成工作。这是我的全部代码

<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>


$（文档）.ready（函数（）{
$（'#btnsupmit'）。单击（函数（）{
变量$form=$（'form'）；
如果（$form.valid（））{
警报（“val正常”）；
}
否则{
警报（“val故障”）；
}
返回false；
});
});
（函数（$）{
var classes={groupIdentifier:“.form group”，错误：'has error'，成功：null}；//成功：'has success'
函数更新类（inputElement、toAdd、toRemove）{
var group=inputElement.closest（classes.groupIdentifier）；
如果（组长度>0）{
addClass（toAdd）.removeClass（toRemove）；
}
}
函数onError（输入元素、消息）{
UpdateClass（inputElement，classes.error，classes.success）；
var options={html:true，位置：'bottom'，标题：'+message+'''}；
$（inputElement）.addClass（'validation-error'）；
inputElement.工具提示（“销毁”）
.addClass（“错误”）
.工具提示（选项）；
}
函数onSuccess（inputElement）{
UpdateClass（inputElement，classes.success，classes.error）；
工具提示（“销毁”）；
$（inputElement）.removeClass（'validation-error'）；
}
功能已验证（错误映射、错误列表）{
$.each（错误列表，函数（）{
onError（$（this.element），this.message）；
});
if（this.settings.success）{
$.each（此.successList，函数（）{
成功（$（此））；
});
}
}
$（函数（）{
$（'form'）。每个（函数（）{
var validator=$（this.data（'validator'）；
validator.settings.rors=onValidated；
});
});
}（jQuery））；

CSS

.验证错误
{
背景：#FEF1EC；
边框：1px实心#CD0A0A；
}
.工具提示内部{
最大宽度：300px；
填充：0；
边框：实心1px#ccc；
背景色：#f00；
}
.工具提示警报{
填充：8px 10px；
字体大小：粗体；
颜色：白色；
背景色：#f00；
} 
.tooltip箭头{边框底部颜色：黑色；}
元素是td中的输入或选择控件，在同一td中，span也在那里。元素是td中的输入或选择控件，在同一td中，span也在那里。@Thomas可以创建stacksnippets来演示？@Thomas“嘿，这段代码行得通。：”
.next（）
是否返回预期结果？这段代码
$（元素）。next（“span”）.hide（）
但您的代码没有。@Thomas可以创建stacksnippets来演示？@Thomas“嘿，这段代码行得通。：”是否
.next（）
返回预期结果？这段代码
$（元素）。next（“span”）.hide（）
但您的代码没有。
$(element).next("span").children("span:first").text()

<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>

<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>