时间戳

首页 > 解决方案 > class="alert hide" 不起作用。所以一直显示

javascript - class="alert hide" 不起作用。所以一直显示

问题描述

正如标题所说，我有一个警报 div，它是一个登录页面，我想在其中验证输入字段。因此，如果输入的 usrname/password 无效，则会显示警报。

我根据 Gabriler 的解决方案更新了代码。该表单是一个简单的登录页面，我使用数据注释来验证用户输入，因此我想在页面加载时隐藏警报。这是我的错，我从一开始就不清楚。我更改了代码以匹配建议的解决方案，但仍然没有达到预期的结果。

贝娄是模型类：

      [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();
          } 
 }

标签： javascripthidealerthidden

解决方案

让我们来看看

  1. 您class在div. 将它们组合成一个属性
  2. 您以错误的方式混合了 jquery 和本机方法。所以没有.document或getElementsByClassName之后$(...)
  3. getElementsByClassName返回一个节点列表，因此您必须在对其运行方法之前提取一个元素（或者如果您想为所有找到的节点运行某些东西，则循环）。
  4. 尝试使用 jquery 查找节点时，您需要使用 CSS 选择器。所以test,test2和test3是错误的，应该是#test或.test取决于它们是 ids 还是 classes
  5. .value如果您有对 DOM 元素的引用，这是访问输入值的方法。当通过 jQuery 你需要使用.val()

不知道$(':input[type="submit"]')应该做什么。

更新

对于 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;
}

推荐阅读