Question

<input asp-for="Input.FirstName" type="text" required>
                    <span class="highlight"></span>
                    <span class="bar"></span>
                    <label>FirstName</label>
<span asp-validation-for="Input.FirstName" class="text-danger"></span>

我有这个代码，如果输入字段无效，我会显示错误，如果输入字段正确填写，我想显示文本或其他内容。我试图从这里获取 ValidFirstName 的值并在我的脚本中使用它来将类从隐藏更改为阻止，但它不起作用：

@Html.Hidden("ValidFirstName", ViewData.ModelState.GetFieldValidationState("Input.FirstName"))

这是jquery代码：

$(function () {
        var v = $('#ValidFirstName').val();
        if (v) {
            $("valid-field").removeClass("d-hidden");
            $("valid-field").addClass("d-show");
        }
    });

还有别的方法吗？

Answer 1

如果你想检查表单是否有效，你可以使用$("xxform").valid()，这里有一个演示：

    <input asp-for="Input.FirstName" type="text" required onblur="check()">
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>FirstName</label>
    @Html.Hidden("ValidFirstName", ViewData.ModelState.GetFieldValidationState("Input.FirstName"))
    <span id="hiddenspan" hidden="hidden">valid</span>
</div>
<input type="submit" value="submit">

js：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
function check() {
            if ($("#myform").valid()) {
                $("#hiddenspan").removeAttr("hidden");
            } else {
                $("#hiddenspan").attr("hidden", "hidden");

            }
        }

结果（如果表单有效，将显示隐藏的跨度）：

更新：

<div class="col-md-10">

    <input asp-for="Input.FirstName" type="text" required>
<input asp-for="Input.xxx" type="text" required>
...
    <span class="highlight"></span>
    <span class="bar"></span>
    <label>FirstName</label>
    @Html.Hidden("ValidFirstName", ViewData.ModelState.GetFieldValidationState("Input.FirstName"))
    <span id="hiddenspan" hidden="hidden">valid</span>
</div>
<input type="submit" value="submit">

js：

<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
$("input").change(function () {
            if ($("#myform").valid()) {
                $("#hiddenspan").removeAttr("hidden");
            } else {
                $("#hiddenspan").attr("hidden", "hidden");

            }
        })

如果输入表单有效，我如何显示消息

1 个答案: