jquery提交函数（）不起作用答案

【问题标题】：jquery submit function() not workingjquery提交函数（）不起作用
【发布时间】：2018-08-19 17:14:17
【问题描述】：

我正在尝试用最简单的方法验证我的表单，但不知何故无法正常工作，当我单击提交按钮时，它只是重新加载页面，而不会在 IsRequired 类上给出错误消息。

我做错了什么？

HTML5

<form method="post">
  <div>
    <div class="field-wrap"><label>First Name</label></div>
    <input class="thevalue" type="text" minlength="3" style="text-transform:uppercase">
    <div class="IsRequired" style="display:none">Fill first name</div>
  </div>
  <div>
    <div class="field-wrap"><label>Second Name</label></div>
    <input class="thevalue" type="text" minlength="3" style="text-transform:uppercase">
    <div class="IsRequired" style="display:none">Fill second name</div>
  </div>
  <div>
    <div class="field-wrap"><label>email</label></div>
    <input class="thevalue" type="text" style="text-transform:lowercase">
    <div class="IsRequired" style="display:none">Fill email</div>
  </div>
  <div>
    <div class="field-wrap"><label>Country</label></div>
    <select name="Country" class="thevalue cs-select" style="display: none;">

    </select>
    <div class="IsRequired" style="display:none">Select country</div>
  </div>
  <div>
    <input name="Submit" type="submit" value="Submit">
  </div>
</form>

JavaScript

$(document).ready(function() {
  $("form").submit(function(event) {
    var bool = false;
    var el = document.getElementsByClassName("thevalue");
    var el_ = document.getElementsByClassName("IsRequired");

    for(var i = 0; i < el.length; i++) {
      if(el[i].value == "" || el[i].value == null) {
        el_[i].style.display = 'block'; // show message error
        bool = true;
      } else if(el[i].value != "" || el[i].value != null) {
        el_[i].style.display = 'none';
      }
    }

    if(bool == true) {
      //no submit without reload
    } else if(bool == false) {
      //submit 
    }

    event.preventDefault();

  })
})

【问题讨论】：

只需使用所需属性进行验证
尽量防止Default()开头。然后在提交时，抛出一个 window.location.refresh
您可以尝试在event.preventDefault();之后返回false
@kevinniel 我继续然后它没有工作。
@AnkitAgarwal 另外，我按照建议继续，然后出现同样的问题

标签： javascript jquery html performance

【解决方案1】：

已解决

我在@Rupal 指定的每个输入字段上添加了 required ，并在@kevinniel 的开头添加了 e.preventDefault() 。

所以，我已将代码更改为：

$('form').submit(function(e) {
  e.preventDefault();
  $('input[required]').each(function() {
    if($(this).val() == '') {
      $('span.form_error').text('A required field was not filled out');
    }
  });
})

【讨论】：