tabbit

Thu Jan 14 2021
Copied to clipboard! Copy reply
<article class='email-collection-container'>
  <form class="email-collection-elements">
    <div class="text-content">
      <p>Sign up to stay in touch.</p>
      <p>Get Rosetta Stone news and offers.</p>
    </div>
    <div class="email-input">
      <input type="email" placeholder="Email address" />
      <div class="error-container">
        error
      </div>
    </div>
    <div class="button">
      <input type="submit" value="SIGN UP" :class="{ disabled: emailSignupSuccessful }" />
    </div>
  </form>
</article>


<script>
  
  var $form = document.querySelector(".email-collection-elements")
    , $input = document.querySelector(".email-collection-elements input[type='email']")    
    , errors = []
    ;
  
  
  
  $form.addEventListener("submit", handleFooterFormSubmit);  
  
  function handleFooterFormSubmit (e) {
    e.preventDefault()    
    errors = [];
    var email = $input.value.trim();
    
    if (!briteVerify(email)) {
      errors.push("<div>Invalid e-mail.</div>");
    }

    if (!errors) {
      document.querySelector(".error-container").innerHTML = "";
    } else {
      errors.forEach(function(e, i) {
         document.querySelector(".error-container").innerHTML = errors.join("");
      })
    }    
  }
  
  
  /* validates email format */
  function validateEmail (email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email)
  } 

  /* briteverify check */
  function briteVerify (email) {	

    // JSONP function
    ;(function(){var e,n,r,o,t,l,u,d;r=function(e){return window.document.createElement(e)},o=window.encodeURIComponent,u=Math.random,e=function(e){var o,l,u,i,a,c,f;if(null==e&&(e={}),c={data:e.data||{},error:e.error||t,success:e.success||t,beforeSend:e.beforeSend||t,complete:e.complete||t,url:e.url||""},c.computedUrl=n(c),0===c.url.length)throw new Error("MissingUrl");return i=!1,c.beforeSend({},c)!==!1&&(u=e.callbackName||"callback",l=e.callbackFunc||"jsonp_"+d(15),o=c.data[u]=l,window[o]=function(e){return window[o]=null,c.success(e,c),c.complete(e,c)},f=r("script"),f.src=n(c),f.async=!0,f.onerror=function(e){return c.error({url:f.src,event:e}),c.complete({url:f.src,event:e},c)},f.onload=f.onreadystatechange=function(){var e,n;if(!(i||"loaded"!==(e=this.readyState)&&"complete"!==e))return i=!0,f?(f.onload=f.onreadystatechange=null,null!=(n=f.parentNode)&&n.removeChild(f),f=null):void 0},a=window.document.getElementsByTagName("head")[0]||window.document.documentElement,a.insertBefore(f,a.firstChild)),{abort:function(){return window[o]=function(){return window[o]=null},i=!0,(null!=f?f.parentNode:void 0)?(f.onload=f.onreadystatechange=null,f.parentNode.removeChild(f),f=null):void 0}}},t=function(){},n=function(e){var n;return n=e.url,n+=e.url.indexOf("?")<0?"?":"&",n+=l(e.data)},d=function(e){var n;for(n="";n.length<e;)n+=u().toString(36).slice(2,3);return n},l=function(e){var n,r,t;return n=function(){var n;n=[];for(r in e)t=e[r],n.push(o(r)+"="+o(t));return n}(),n.join("&")},("undefined"!=typeof define&&null!==define?define.amd:void 0)?define(function(){return e}):("undefined"!=typeof module&&null!==module?module.exports:void 0)?module.exports=e:this.JSONP=e}).call(window);
	
	  var data = { 
      username: 'vjohn',
      address: email
    };   

    var promise = new Promise(function(resolve, reject) {
      JSONP({
        url: 'https://bpi.briteverify.com/emails.json',
        data: data,
        complete: function(data) {
          if (data.status == 'valid') {					
            return 1
          } else {									
            return 0
          }
        } 
      });
    });	  

    promise.then(function(v) { })
  }
  
</script>













<style>
  .email-collection-container {
  background-color: #0098db;
  color: #fff;
  padding: 15px;
  visibility: visible;
  transform: scaleY(1);
  transition: all 0.5s ease;
}

.email-collection-container.hidden {
  transform: scaleY(0);
  visibility: hidden;
}

.email-collection-container.display-none {
  display: none;
}

.email-collection-elements {
  max-width: 975px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.text-content {
  font-family: helvetica;
  font-weight: 700;
}

.text-content p {
  margin-top: 5px;
  margin-bottom: 5px;
}

.text-content p:first-child {
  font-size: 24px;
}

.text-content p:last-child {
  font-family: effra, sans-serif;
  font-size: 16px;
  letter-spacing: .12px;
  line-height: 19px;
  font-weight: 400;
}

.email-input {
  width: 100%;
  max-width: 348px;
  padding: 0 5px;
}

.email-input input {
  box-sizing: border-box;
  height: 51px;
  width: 100%;
  padding-left: 16px;
  border: 1px solid #979797;
  border-radius: 8px;
  color: #262626;
  background-color: #fff;
}

.button input {
  background-color: #F0C433;
  color: #262626;
  display: block;
  font-size: 16px;
  letter-spacing: 4px;
  font-family: effra;
  text-align: center;
  border-radius: 8px;
  padding: 1em 2.5em;
  font-weight: bold;
  border: none;
  margin-bottom: 0;
}

.button input:hover {
  background-color: #d7b12c;
  cursor: pointer;
}

.button input.disabled {
  background-color: #d7b12c;
}

.button input.disabled:hover {
  cursor: default;
}

.error-container {
  max-width: 875px;
  display: flex;
  text-align: center;
  margin: 5px auto 0 auto;
  background: #f97a7a;
  padding: 5px;
  border: 2px solid #a22b2b;
  box-sizing: border-box;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .email-input {
    max-width: 275px;
  }
}

/* Media query accomodates both standard and homeschool form text lengths */
@media (max-width: 815px) {
  .email-collection-elements {
    flex-direction: column;
    max-width: 330px;
  }

  .email-collection-elements > div {
    text-align: center;
    padding-bottom: 15px;
  }

  .email-collection-elements > div:last-child {
    padding-bottom: 0;
  }

  .email-input {
    padding: 0;
    max-width: none;
  }

  .button {
    width: 100%;
  }

  .button input {
    width: 100%;
  }

  .error-container {
    justify-content: center;    
    margin-top: 10px;
  }

  .error-container .error {
    width: 100%;
    text-align: center;
  }
}