javascript - 如何避免在此 jQuery 验证案例中重复 isValid？

Question

我正在尝试验证一个字段，我的主要目标是:

1. 当用户登陆页面时，无需验证
2. 验证从用户单击“名称查询”字段开始，并在键上和焦点移出时进行验证
3. 字段在表单提交时也会被验证:如果字段无效，点击提交按钮除了显示验证消息外什么都不做；只有在字段有效时才会提交表单。

这是我想出的一个片段:

var myForm = $("#myform"),
    nameQuery = $("#NameQuery");

myForm.validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  }
});

nameQuery.on("focusout keyup submit", function() {
  var isValid = myForm.valid();
  if (!isValid) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

nameQuery.on("submit", function() {
  var isValid = myForm.valid();
  if (isValid) {
    $("p").html("Form sumitted");
  }
  else {
    $("p").empty();
  };
});

.alert-text {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
  <label for="NameQuery">Name Query: </label>
  <input type="text" id="NameQuery" name="NameQuery">
  <input type="submit" value="Search">
  <p></p>
</form>

几个问题:

1. 我用了两次var isValid = myForm.valid();，似乎有点重复，但我想不出更简洁的方法？
2. 如果字段有效，点击提交按钮会导致所有内容消失？
3. 我的代码段能否以任何方式改进？

编辑:通过说代码重复和更简洁，我的意思是可以将这两个部分合并为一个部分:

nameQuery.on("focusout keyup submit", function() {
  var isValid = myForm.valid();
  if (!isValid) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

和

nameQuery.on("submit", function() {
  var isValid = myForm.valid();
  if (isValid) {
    $("p").html("Form sumitted");
  }
  else {
    $("p").empty();
  };
});

他们操作的是同一个元素，里面的逻辑看起来也很相似。

Answer 1

答案:

1) 如果看起来重复 var isValid = myForm.valid(); 然后使用 if(myForm.valid()) 这个。

2)一切都消失了，因为你在输入框而不是表单上调用提交功能，默认的表单提交行为是刷新。 试试下面的代码

  var myForm = $("#myform"),
    nameQuery = $("#NameQuery");

myForm.validate({
  rules: {
    NameQuery: "required"
  },
  messages: {
    NameQuery: "Please fill in name query"
  }
});

nameQuery.on("focusout keyup submit", function() {
  if (!myForm.valid()) {
    nameQuery.addClass("alert-text");
  }
  else {
    nameQuery.removeClass("alert-text");
  };
});

myForm.on("submit", function(e) {
  e.preventDefault();
  if (myForm.valid()) {
    $("p").html("Form submitted");
  }
  else {
    $("p").empty();
  };
});

.alert-text {
  border: 1px dashed red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>


<form id="myform" method="post">
  <label for="NameQuery">Name Query: </label>
  <input type="text" id="NameQuery" name="NameQuery">
  <input type="submit" value="Search">
  <p></p>
</form>

3)我对它进行了一些改进。上面可以看到