Question

对不起，我知道已经问过类似这样的问题了，但是对我而言，我未能克服一个错误，因为这是我第一次使用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>

任何有想法的人。

Answer 1

最终，问题解决了，我将标题更改为以下内容，一切正常。

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" 
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore- 
  min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"> 
</script>
<script src="validate.js"></script>
<style>
  .help-block.error {
    margin-bottom: 5px;
  }
</style>
</head>

验证js不起作用，未捕获的ReferenceError：未定义验证

1 个答案: