class = "alert hide" не работает. так что отображается все время - PullRequest
Новая
       40

class = "alert hide" не работает. так что отображается все время

0 голосов
/ 26 июня 2019

Как видно из названия, у меня есть div оповещения. Это страница входа, на которой я хочу, чтобы клиент проверял поля ввода. Таким образом, предупреждение будет отображаться в случае неправильного ввода имени пользователя / пароля.

Я обновил код в соответствии с Gabriler'ssolution. Форма представляет собой простую страницу входа в систему, где я использую аннотацию данных для проверки ввода пользователя, поэтому я хочу скрыть предупреждение о загрузке страницы. это мое плохое, мне было непонятно с самого начала. Я изменил код в соответствии с предлагаемым решением, но все еще не достиг желаемых результатов.

Ниже представлен модельный класс: 

      [DataType(DataType.Text)]
      [Required(ErrorMessage = "password please")]
      public string test { get; set; }


    [MaxLength(10), MinLength(8, ErrorMessage = "check the length")]
    [Required(ErrorMessage = "missing name")]
    public string test2{ get; set; }

и кнопка отправки находится ниже: 

  <button class="button button-primary button-active" id="danger" 
   type="submit">Login</button>

В файле CSHTML я делаю следующее: 

          </label>
          @Html.EditorFor(model => model.name, new { 
          htmlAttributes = new { @class = "form-input"
         Type="HtmlInputFile", 
          id="name" , value=""} })
                        <br>
                        @Html.ValidationMessageFor(model => model.test, 
                        "", new { @class = "alert alert-error" })

Мой метод Javascript выглядит следующим образом: EDITED 

     $(document).ready(function () {
     myTest();
  });

  var myTest = function () {

    var val1 = $("test").value;
    var val3 = $("test3").value;

    if (val1 !== '' || val3 !=='') {    

      $('input[type="submit"]').$('.alert.alert-error').hide();       
      else {
             $('input[type="submit"]').$('.alert.alert-error').show();
          } 
 }

1 Ответ

1 голос
/ 26 июня 2019

Посмотрим

  1. У вас есть несколько class атрибутов на div.Объедините их в один атрибут
  2. . Вы неправильно смешиваете jquery и нативные методы.Поэтому .document или getElementsByClassName после $(...)
  3. getElementsByClassName не возвращает список узлов, поэтому вам придется извлечь элемент перед запуском на нем методов ( или цикл, если вы хотите что-то запуститьдля всех найденных узлов ).
  4. при попытке найти узел с помощью jquery необходимо использовать селекторы CSS.Так что test, test2 и test3 неверны и, вероятно, должны быть #test или .test в зависимости от того, являются ли они идентификаторами или классами
  5. .value - это способ доступа к значениювведите, если у вас есть ссылка на элемент DOM.При работе с jQuery вам нужно использовать .val()

, но вы не знаете, что должен делать $(':input[type="submit"]').

update

для 1 вам нужно использовать один атрибут, а не один класс для каждого атрибута. 

<div 
class="alert alert-error alert-body alert-heading alert-text" 
role="alert" 
aria-label="blabla...">
</div>

О скрипте, который вам, скорее всего, нужно что-то вроде 

$(document).ready(function() {
  validate();
  $('button[type="submit"]').on('click', function(e) {
    if (!validate()) {
      e.preventDefault();
    }
  });
});

function validate() {
  var val1 = $('#test').val();
  var val2 = $('#test2').val();
  var val3 = $('#test3').val();

  var valid =
    (val1 !== '' && val3 !== '' && val2 === '') ||
    (val1 === '' && val2 !== '' && val3 !== '');
    
  if (valid) {
    $('.alert.alert-error').hide();
  } else {
    $('.alert.alert-error').show();
  }
  return valid;
}
...