title: validate js not work, Uncaught ReferenceError: validate is not defined
body: <p>Sorry, I know that the questions like this have been asked several times, but for my side, I have failed to overcome an error, as it's my first time to use validate.js. below here is the error and then validate.js and then html form.</p>
  
  <p>This is the error</p>
  
  <pre><code>        `Uncaught ReferenceError: validate is not defined
          var values = validate.collectFormValues(form);`
  </code></pre>
  
  <p>this is validate.js within the body tag</p>
  
  <pre><code>       (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 &amp;&amp; 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
  // &lt;p class="help-block error"&gt;[message]&lt;/p&gt;
  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!");
    }
  })();
  </code></pre>
  
  <p>here is HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.12.0/validate.min.js"&gt; 
  &lt;/script&gt;
  &lt;!--the above function is within this file--&gt;
  &lt;script src="example\lock\assets1\jquery2\custom_validate.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"&gt;
  &lt;link rel="stylesheet" href="example\lock\assets1\jquery2\validate.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
       &lt;form id="main" class="form-horizontal" action="/example" 
  method="post"&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="col-sm-2 control-label" for="email"&gt;Email&lt;/label&gt;
      &lt;div class="col-sm-5"&gt;
        &lt;input id="email" class="form-control" type="email" 
  placeholder="Email" name="email"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-5 messages"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label class="col-sm-2 control-label" for="password"&gt;Password&lt;/label&gt;
      &lt;div class="col-sm-5"&gt;
        &lt;input id="password" class="form-control" type="password" 
  placeholder="Password" name="password"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-5 messages"&gt;&lt;/div&gt;
    &lt;/div&gt;     
    &lt;div class="form-group"&gt;
      &lt;div class="col-sm-offset-2 col-sm-10"&gt;
        &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/form&gt;
   &lt;/div&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Any body with any idea please.</p>