Jquery 验证器无法处理空表单提交

Question

这是我的代码：

<!DOCTYPE html>
<html>

<head>
  <title>Registration Form Using jQuery - Demo Preview</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>

<body>
  <form id="myForm">
    FirstName :
    <br>
    <input type="text" name="fname" minlength="3" id="fname" required>
    <br>LastName :
    <br>
    <input type="text" name="lname" id="lname" minlength="3" required>
    <br>Email :
    <br>
    <input type="email" name="email" id="email" required>
    <br>URL :
    <br>
    <input type="url" name="url" id="url">
    <br>
    <br>
    <input type="button" value="Submit" class="submit">
  </form>
  <script>
    $("#myForm").validate();
  </script>
</body>

</html>

与http://jqueryvalidation.org/files/demo/的第一种形式类似当我在字段中输入文本时它工作正常，但是当我提交空表单时它没有给出验证错误。

Answer 1

如果您希望在单击时触发验证，您的提交按钮必须是 type="submit"。

<input type="submit" ....

<!DOCTYPE html>
<html>

<head>
  <title>Registration Form Using jQuery - Demo Preview</title>
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
</head>

<body>
  <form id="myForm">
    FirstName :
    <br>
    <input type="text" name="fname" minlength="3" id="fname" required>
    <br>LastName :
    <br>
    <input type="text" name="lname" id="lname" minlength="3" required>
    <br>Email :
    <br>
    <input type="email" name="email" id="email" required>
    <br>URL :
    <br>
    <input type="url" name="url" id="url">
    <br>
    <br>
    <input type="submit" value="Submit" class="submit">
  </form>
  <script>
    $("#myForm").validate();
  </script>
</body>

</html>

Jquery 验证器无法处理空表单提交

Jquery validator not working with empty form submission

jquery

jquery-validate