как показать все ошибки на странице за один снимок (кнопка отправки) при проверке на стороне клиента в ядре mvc. net - PullRequest
1 голос
/ 07 января 2020

У меня есть страница со многими обязательными полями. Поэтому, когда я нажимаю кнопку «Отправить», требуется выполнить проверку для первого поля, затем для второго, затем третьего и т. Д. *

Что мне нужно сделать здесь, то, когда я нажимаю на «Отправить», мне нужно показать все ошибки на странице в одном кадре. Мое требование - добиться этого только путем проверки клиентской стороны.

Я использую приложение. Net core MVC. Ниже приведен скриншот моей страницы enter image description here Могу ли я добиться этого .. Пожалуйста, помогите мне .. Спасибо !!

Ответы [ 4 ]

1 голос
/ 07 января 2020

Я могу дать вам идею выполнить вашу работу, используя jquery пользовательскую проверку. Пожалуйста, обратитесь к моему решению.

  1. Добавьте пользовательский класс стилей в необходимые поля.

    Пример:

     <input type="text" class="req-cls" >
    
  2. Запись Jquery функции для проверки правильности

      $(document).ready(function () {
            $('#btn1').click(function (e) {
                    var isValid = true;
                    $('.req-cls').each(function () {
                           if ($.trim($(this).val()) == '') {
                                isValid = false;
                                $(this).css({
                                    "border": "1px solid red",
                                    "background": "#FFCECE"
                                });
                            }
                            else {
                                $(this).css({
                                     "border": "",
                                     "background": ""
                                });
                            }
                     });
    
                     if (isValid == false)
                           e.preventDefault();
    
           });
      });
    

См. Пример здесь: https://jsfiddle.net/Shalitha/q2n8L9wg/24/

0 голосов
/ 08 января 2020

Сначала нам нужно добавить JQuery, jquery .validate & jquery .validate.unobtrusive в наших представлениях.

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>

Затем в View добавить необходимые data-* атрибуты, такие как :

<label for="Name">Name</label>
<input type="text" data-val="true" data-val-length="Length must be between 10 to 25" data-val-length-max="25" data-val-length-min="10" data-val-required="Please enter the name" id="Name" name="Name" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<br />

Вы можете видеть, что он добавил несколько атрибутов, начинающихся с data-*.

Атрибуты data-* являются частью HTML5, что позволяет нам добавлять дополнительная информация (метаданные) для элемента HTML.

Ненавязчивая библиотека Javascript считывает атрибуты data-val и выполняет проверку на стороне клиента в браузере, когда пользователь отправляет форму. Эти проверки выполняются до отправки формы по HTTP. В случае ошибки проверки запрос не будет отправлен.

0 голосов
/ 07 января 2020

Так как вам нужна клиентская часть, мы говорим о JS. Но с помощью бритвы вы можете проверить несколько результатов, используя аннотации модели. Например, предположим, что у вас есть этот объект.

public class UserCreationVO
{
   [Required]
   [StringLength(255)]
   public string Username { get; set; }
}

Теперь, что вам нужно сделать в своем интерфейсе (имеется в виду ваш файл .cs html), это сказать asp. net, чтобы использовать это свойства для проверки. Так, например:

@model UserCreationVO
<form method="post">
    <input asp-for="UserName" />
    <span asp-validation-for="UserName"></span>
</form>

Как вы можете видеть выше, использование asp -for является отличным способом создания проверок с использованием ваших моделей. Будьте осторожны, вы должны передать в качестве модели объект, который вы хотите проверить. Тег asp -for показывает свойство модели. Таким образом, вы не можете передать его в Viewbag или что-то еще. Это создает некоторые автоматы c html и js для вас и обрабатывает их.

Более того, вы все равно должны всегда проверять результат в контроллере. Поскольку проверка на стороне клиента осуществляется по соображениям производительности и взаимодействия с пользователем и не обеспечивает какой-либо безопасности:

public IActionResult CreateUser(UserCreationVO user)
{
  if(!ModelState.IsValid)
     return your_error;
}

Последнее, но не менее важное: Вы должны включить JQuery ненавязчивую библиотеку проверки . Кроме того, если у вас есть некоторые дополнительные требования, такие как проверка, существует ли имя пользователя (что невозможно сделать без обращения к серверу), вы можете использовать атрибут [Remote].

Дополнительная информация и чтение о внешней проверке с бритвой: здесь

Как использовать удаленный атрибут: Использование удаленной проверки с ASP. NET Core

EDIT:

Так что обычно я советую использовать модели и создавать их. Как вы говорите, политика требуется в одной форме, но не в другой. Что вы должны сделать, чтобы получить обслуживаемый код, в котором вы просто меняете атрибут вашей модели и происходит проверка, вам нужно создать другой VO. Например:

public class CreatePolicyVO
{
  [Required]
   public string PolicyNumber {get; set;}
}

И еще один объект, например, обновление:

public class UpdatePolicyVO
{

   public string PolicyNumber {get; set;}
}

Поскольку вам также необходимо проверить их в контроллере. Таким образом, передача другого объекта позволяет вам использовать ModelState.IsValid и другие MVC и бритвенные функции. Обычно, если поле требуется в одном случае, а не в другом, вам нужна другая модель.

0 голосов
/ 07 января 2020

Просто добавьте эту строку в ваш .cs html

<div class="validation-summary-valid" data-valmsg-summary="true">
  <ul>
   <li style="display: none;"></li>
  </ul>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...