Блог

Есть ли какой-либо способ запустить ASP.NET Основная проверка на стороне клиента с помощью JavaScript?

У меня есть страница Razor Pages с a <form> , которая включает в себя такой контент:

 <div class="row">
    <div class="col-md-6">
        <label asp-for="LocationModel.Location" class="control-label"></label>
        <input asp-for="LocationModel.Location" class="form-control" />
        <span asp-validation-for="LocationModel.Location" class="text-danger"></span>
    </div>
    <div class="col-md-6">
        <label asp-for="LocationModel.LoadsPerMonth" class="control-label"></label>
        <input asp-for="LocationModel.LoadsPerMonth" class="form-control" />
        <span asp-validation-for="LocationModel.LoadsPerMonth" class="text-danger"></span>
    </div>
</div>
  

Если я отправляю форму, все ошибки проверки выделяются и отображаются. Есть ли какой-нибудь способ запустить это из JavaScript?

На самом деле я не отправляю форму на сервер. Я просто хочу использовать значения в JavaScript. Но я бы хотел использовать ASP.NET Проверка ядра, если смогу. Я вижу, что могу просто задать текст проверки <span> . Возможно, я мог бы это сделать, если бы знал, как сделать границу элемента управления красной так, как это делает проверка.

Я нашел несколько примеров, которые делают это, но не для ASP.NET Основные страницы или страницы Razor.

Вы можете сделать это с помощью ненавязчивой проверки. Для этого вам необходимо включить частичное представление, которое отображает ненавязчивые сценарии проверки jQuery. Для этого добавьте следующее в нижней части вашего представления:

 @section Scripts {
    // You can find the partial in ~/Views/Shared
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}
  

Далее, в качестве глупого примера проверки формы из JavaScript при загрузке, вы можете добавить a script в тот же Scripts раздел под включением частичного:

 @section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script type="text/javascript">
        $(function () {
            $('#formID').validate();

            if ($('#formID').valid() === true) {
                console.log("valid");
            } else {
                console.log("invalid");
            }
        });
    </script>
}
  

Обновление для комментариев

 @model SiteViewModel

<form asp-action="Index" id="formID" method="post">
    <input asp-for="Name" />
    <span asp-validation-for="Name"></span>
    <input type="submit" />
</form>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script type="text/javascript">
        $(function () {
            $('#formID').validate();

            if ($('#formID').valid() === false) {
                console.log("invalid");
            } else {
                console.log("valid!");
            }
        });
    </script>
}
  

где SiteViewModel просто:

 public class SiteViewModel
{
    [Required]
    public string Name { get; set; }
}
  

В последних приложениях .Net Core вы найдете _ValidationScriptsPartial.cshtml файл внутри Shared папки. Используйте его в самом конце views (.cshtml) после того, как все теги закрыты для проверки на стороне клиента

 @section Scripts{
    @{
       <partial name="_ValidationScriptsPartial"/>
    }
}