为什么无法进行jquery验证？

Question

我有一个字段的表单，并通过jquery validation验证此字段。 但是在所有情况下，我的表格都是沙子，但是在js我注入了约束，验证不起作用。

帮助我解决此问题。 谢谢。

这是index.html form ：

<head>
    <title>Form</title>

    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <script src="jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script>
    <script src="validation.js"></script>

</head>
<body>
    <div class="p-x-1 p-y-3">
        <form id="form" class="card card-block m-x-auto bg-faded form-width" method="POST" action="go" name="validation">
            <legend class="m-b-1 text-xs-center">Enter data</legend>

            <div class="form-group input-group">
                <span class="has-float-label">
                <input class="form-control" name="name" id="name" type="text" placeholder="Name"/>
                <label for="name">Name</label>
                </span>
            </div>

            <div class="text-xs-center">
                <button class="btn btn-block btn-primary" type="submit">Edit</button>
            </div>

        </form>
    </div>
</body>

这是用于验证的js脚本：

$(function() {
  // Form contain attribute name="registration".
  $("form[name='validation']").validate({
    rules: {
      name: {
        required: true,
        minlength: 5
      }
    },

    // Error message.
    messages: {
      name: "Error"
    },

    submitHandler: function(form) {
      form.submit();
    }
  });
});

我在同一文件夹中的jquery-validation库是什么index.html 。

Answer 1

请交换两个脚本，如下所示。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="jquery-validation/dist/jquery.validate.min.js"></script>

当您使用jQuery插件时，它总是需要jQuery。 在您的情况下，您先添加了验证库，然后是jQuery，因此无法正常工作。

Answer 2

您的代码按此顺序导入css和js

    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <script src="jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script>
    <script src="validation.js"></script>

但您应该先导入jquery，然后再导入扩展名，即jquery验证。 为了安全起见，我还建议在导入引导程序组件文件之前使用jquery。 因此，您正确的导入顺序将是：-

    <script src="src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min‌.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"/>
    <link href="style.css" rel="stylesheet">
    <script src="jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="validation.js"></script>

虽然，这是没有上下文的，但是，您应该在引导css文件之后导入自定义css。

为什么无法进行jquery验证？

问题描述

2 个解决方案

解决方案1
2 2017-06-23 11:38:45

解决方案2
2 已采纳 2017-06-23 12:24:44

为什么无法进行jquery验证？

问题描述

2 个解决方案

解决方案1 2 2017-06-23 11:38:45

解决方案2 2 已采纳 2017-06-23 12:24:44

解决方案1
2 2017-06-23 11:38:45

解决方案2
2 已采纳 2017-06-23 12:24:44