【发布时间】：2018-10-26 05:24:22
【问题描述】：
对不起，我知道这样的问题已经被问过好几次了，但就我而言，我未能克服一个错误，因为这是我第一次使用 validate.js。下面是错误，然后是 validate.js，然后是 html 表单。
这是错误
`Uncaught ReferenceError: validate is not defined
var values = validate.collectFormValues(form);`
这是body标签中的validate.js
(function() {
// These are the constraints used to validate the form
var constraints = {
email: {
// Email is required
presence: true,
// and must be an email (duh)
email: true
},
password: {
// Password is also required
presence: true,
// And must be at least 5 characters long
length: {
minimum: 5
}
}
};
// Hook up the form so we can prevent it from being posted
document.querySelector("form#main")
.addEventListener("submit", function(ev) {
ev.preventDefault();
handleFormSubmit(this);
});
function handleFormSubmit(form) {
// First we gather the values from the form
var values = validate.collectFormValues(form);
// then we validate them against the constraints
var errors = validate(values, constraints);
// then we update the form to reflect the results
showErrors(form, errors || {});
// And if all constraints pass we let the user know
if (!errors) {
showSuccess();
}
}
// Updates the inputs with the validation errors
function showErrors(form, errors) {
// We loop through all the inputs and show the errors for that input
_.each(form.querySelectorAll("input[name], select[name]"), function(input) {
// Since the errors can be null if no errors were found we need to handle
// that
showErrorsForInput(input, errors && errors[input.name]);
});
}
// Shows the errors for a specific input
function showErrorsForInput(input, errors) {
// This is the root of the input
var formGroup = closestParent(input.parentNode, "form-group")
// Find where the error messages will be insert into
, messages = formGroup.querySelector(".messages");
// First we remove any old messages and resets the classes
resetFormGroup(formGroup);
// If we have errors
if (errors) {
// we first mark the group has having errors
formGroup.classList.add("has-error");
// then we append all the errors
_.each(errors, function(error) {
addError(messages, error);
});
} else {
// otherwise we simply mark it as success
formGroup.classList.add("has-success");
}
}
// Recusively finds the closest parent that has the specified class
function closestParent(child, className) {
if (!child || child == document) {
return null;
}
if (child.classList.contains(className)) {
return child;
} else {
return closestParent(child.parentNode, className);
}
}
function resetFormGroup(formGroup) {
// Remove the success and error classes
formGroup.classList.remove("has-error");
formGroup.classList.remove("has-success");
// and remove any old messages
_.each(formGroup.querySelectorAll(".help-block.error"), function(el) {
el.parentNode.removeChild(el);
});
}
// Adds the specified error with the following markup
// <p class="help-block error">[message]</p>
function addError(messages, error) {
var block = document.createElement("p");
block.classList.add("help-block");
block.classList.add("error");
block.innerHTML = error;
messages.appendChild(block);
}
function showSuccess() {
// We made it \:D/
alert("Success!");
}
})();
这里是 HTML
<!doctype html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js">
</script>
<!--the above function is within this file-->
<script src="example\lock\assets1\jquery2\custom_validate.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="example\lock\assets1\jquery2\validate.css">
</head>
<body>
<form id="main" class="form-horizontal" action="/example"
method="post">
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-5">
<input id="email" class="form-control" type="email"
placeholder="Email" name="email">
</div>
<div class="col-sm-5 messages"></div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="password">Password</label>
<div class="col-sm-5">
<input id="password" class="form-control" type="password"
placeholder="Password" name="password">
</div>
<div class="col-sm-5 messages"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
请有任何想法的任何人。
【问题讨论】：
-
您是否使用脚本标签导入了 validate.js 文件？如果你这样做了，请检查它是否在浏览器中加载。
-
我已经检查过，一切正常，脚本在那里并且已经加载
-
你能把html代码的head部分贴出来吗？
-
导入validate.js的脚本标签必须在你实现上述功能的脚本标签之前。检查这个。
-
我已经编辑了问题，HTML的head部分现在在那里