gpt4 book ai didi

javascript - 为什么 jquery 验证不起作用?

转载 作者:行者123 更新时间:2023-11-28 14:50:22 26 4
gpt4 key购买 nike

我有一个包含一个字段的表单,并且我通过 jquery 验证 来验证该字段。但我的表单在所有情况下都是如此,但在 js 中我注入(inject)了约束,验证不起作用。

帮我解决这个问题。谢谢。

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

我在 index.html 的同一文件夹中有 jquery-validation 库。 enter image description here

最佳答案

您的代码按此顺序导入 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。

关于javascript - 为什么 jquery 验证不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44720535/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com