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

Question

正如标题所说，我有一个警报 div，它是一个登录页面，我希望客户端在其中验证输入字段。因此，如果输入的用户名/密码无效，则会显示警报。

我根据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 方法如下所示:已编辑

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

Answer 1

让我们看看

1. 您有多个class div 上的属性。将它们合并为一个属性
2. 您正在以错误的方式混合 jquery 和 native 方法。所以不.document或getElementsByClassName之后$(...)
3. getElementsByClassName返回一个节点列表，因此您必须在对其运行方法之前提取一个元素(如果您想为所有找到的节点运行某些内容，则需要循环)。
4. 当尝试使用 jquery 查找节点时，您需要使用 CSS 选择器。所以test , test2和test3是错误的，可能应该是 #test或.test取决于它们是 id 还是类
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;
}