title: How to return Boolean from jQuery plugin to html?
body: <p>I am currently working on a password strength meter that provides real-time update to the user via onkeyfocus event. I have decided to use <a href="https://github.com/elationbase/jquery.passwordRequirements" rel="nofollow noreferrer">https://github.com/elationbase/jquery.passwordRequirements</a> for this purpose. Currently I am trying to return a Boolean from the jQuery plugin to my html so that I could check if the user input password has met the requirement completely. If it does not, to prevent them from further continuing in whatever they are doing. Below is what I have came up with so far. My question is how can I pass the var <code>is_passed</code> back to the html?</p>
  <p><strong>jQuery Plugin</strong></p>
  <pre><code>(function($){
      $.fn.extend({
          passwordRequirements: function(options) {
              // options for plugin
              var defaults {...};
              options =  $.extend(defaults, options);
  
              var is_passed = false; // the variable that I wish to return
  
              return this.each(function() {
                  ... //skipping all the checks
                  $(this).on(&quot;keyup focus&quot;, function(){
                      var thisVal = $(this).val();
                      if (thisVal !== '') {
                          checkCompleted();
                          if (is_passed === true) {
                              console.log('is_passed', is_passed);
                              return is_passed;
                          }
                      } 
                  )};
  
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('.pr-password').passwordRequirements({});
          var is_passed = $('.pr-password').passwordRequirements({}); //not working as it returns an Obj
      });
  &lt;/script&gt;
  </code></pre>