Basic JavaScript Form Validation with RegExp

Vanilla (no-frameworks) JavaScript form validation script. Has mailchimp code and CSS inline, but otherwise just exchange the server for your own.

by andioak

HTML

<!DOCTYPE html>
<html>

   <head>
      <style media="screen">
         html,
         body {
            background: #000; /* some relaxing colors :) */
            color: #bbb;
				padding: 0; margin: 0;
				text-align: center;
         }
			.container { padding: 35px 20px 20px; position: relative; }
			p, a, span { line-height: 1.4em; }
			input { padding: 5px 12px; line-height: 2em; border: none; border-radius: 7px; max-width: 100%; } 
			input:focus { outline: none; }
			button { padding: 9px 12px; line-height: 2em; max-width: 100%; }
			#valMessagesBox { 
				background-color: #222;
				padding: 10px 15px; margin: 20px auto;
				clear: both;
			}
			#valMessagesBox.inactive-box { background-color: transparent; height: 0px; } /* this is removed upon messages activation */
			#valMessagesBox.color-warning p { color: yellow; }
			#valMessagesBox.color-error p { color: red; }
			#valMessagesBox.color-success p { color: green; }

      </style>
      <script>
         function validateForm() {

            var e_entry = document.forms["website-embedded-form"]["email"].value;
            var valmessages = document.getElementById("valMessages");
            var text;

				// regex string that validates that you have a @, only a-z, 0-9 and certain others, then does not stop with spaces or a dot.
				// use: https://www.regextester.com/ - to navigate the regex parts.
            var email_regex = /^[a-zA-Z0-9_\-\.{}\[\]()]{1,}\@[a-zA-Z0-9_\-\.{}\[\]()]{1,}\.[\S][^.]*$/; // non global. 

            var checkEmail = e_entry.match(email_regex);

            // If x is Not a Number or less than one or greater than 10
            if (e_entry.length > 4 && e_entry.length < 100) {

               if (checkEmail) { // true if we matched with an email address in regex.

                  text = "Great! We just sent you an activation email to: \n" + checkEmail;
						message_classes("color-success");
						valmessages.innerHTML = text;
						
						// now send form to page...