Как инициировать проверку данных только тогда, когда пользователь нажимает на форму отправки, но не после изменения значения в текстовом поле в ASP.NET MVC?

#javascript #asp.net-mvc #razor #data-annotations

#javascript #asp.net-mvc #razor #данные-аннотации

Вопрос:

У меня есть одна модель с некоторыми атрибутами внутри, такими как CustomerName.

 [Required(ErrorMessage = "Customer Name is required")]
public string CustomerName{ get; set; }
  

В моей форме я объявляю текстовое поле следующим образом:

 @(Html.DevExtreme().TextBoxFor(m => m.CustomerName).ID("txtCustomerName"))
  

Когда я впервые загружаю страницу, в txtCustomerName будут загружены данные. Кроме того, есть еще одна кнопка, которая имеет функцию очистки значения текстового поля. Однако, как только я нажимаю кнопку очистить, сразу появляется сообщение об ошибке «Требуется имя клиента», поскольку в атрибуте аннотации данных указано «Требуется».

Мой вопрос в том, как мне избежать запуска проверки при программном удалении значения текстового поля? Конечно, при нажатии на форму отправки будет запущена проверка, которая в порядке. Заранее спасибо.

Ответ №1:

Может быть более эффективный способ сделать это (я сам довольно новичок в аннотациях данных ASP-NET), однако я бы решил это так:

Удалите требуемую аннотацию из строки CustomerName в вашей модели, если вы не хотите, чтобы средство проверки появлялось при удалении значения поля.

Определите поле для имени пользователя следующим образом:

 <input id="txtCustomerName" onchange="$('#txtCustomerNameValidator').hide()" type="text" asp-for="CustomerName">
<!--Validation span, feel free to customise this with CSS as you wish -->
<span id="txtCustomerNameValidator" style="display: none;">Please Enter a Customer Name</span>

<!-- Make sure a button in your form is set up to call the JS method: -->
<button type="submit" onclick="OnCustomerFormSubmit('formId')">Submit Form</button>
  

asp-for Помощник по тегам невероятно полезен для ссылки на значение переменной / объекта в вашей модели страницы и сохранения его значения, если оно есть.

Создайте метод JS, который будет показывать / скрывать некоторую проверку при отправке формы для этого поля и запускать ее при нажатии кнопки отправки:

 function OnCustomerFormSubmit(formId) {
    var customerNameField = $("#txtCustomerName");
    var customerNameValidator = $("#txtCustomerNameValidator");
    var isValid = true;

    if (customerNameField.val() === null || customerNameField.val() === '') {
        customerNameValidator.show();
        isValid = false;
    }

    if (isValid) {
        $('#'   formId).submit();
    }
}
  

Если у кого-нибудь есть какие-либо улучшения, которые они могли бы предложить для этого подхода, это было бы здорово. Будьте осторожны, ха-ха.

Я надеюсь, что это поможет вам OP.

Комментарии:

1. Привет @ JJ173, спасибо за ваш ответ. Но мне интересно, где я могу получить «#txtCustomerNameValidator»? Такой элемент не найден.

2. Привет @JCYOUNG, попробуйте добавить этот фрагмент в поле ввода имени вашего клиента: <span id="txtCustomerNameValidator" style="display:none;"> <span id="txtCustomerName_Error">Please Enter a Customer Name</span> </span> Это должно дать вам желаемый результат и отобразить нужную ошибку. Вам также следует добавить класс CSS в тег txtCustomerNameValidator span, если вы хотите, чтобы он выглядел как ошибки из аннотаций данных. Вы должны быть в состоянии найти нужный класс, если вы проверите элемент ошибки и возьмете из него класс.