Example of a Custom HTML form with Javascript validation for OptinMonster

custom-html-js-validation-example.html

<form id="campaign-{{id}}" novalidate class="{{ns}}" method="POST" action="submit.php">
	<input id="name" type="text" placeholder="First and Last Name" required />
	<input id="email" type="email" placeholder="Email" required />
	<span class="error"></span>
	<input type="submit" name="submit" value="Submit" />
</form>
<script>
	(function() {
		const form = document.getElementById('campaign-{{id}}');

		const email = document.querySelector('form#campaign-{{id}} #email');
		const name = document.querySelector('form#campaign-{{id}} #name');
		const error = document.querySelector('form#campaign-{{id}} span.error');

		function validateForm() {
			// Removes the invalid class
			name.className = name.className.replace(/\binvalid\b/g, "");
			email.className = email.className.replace(/\binvalid\b/g, "");

			// Clears the error span
			toggleErrorMsg();

			// Validates the name field
			if (name.validity.valueMissing || name.value.split(' ').length < 2) {
				// If the name field is empty or it doesn't contain a value for first and last name
				// display the following error message.
				name.className += ' invalid';
				toggleErrorMsg('You need to enter a value for first and last name.');
				return false;
			}

			// Validates the email field
			if (email.validity.valueMissing || email.validity.typeMismatch) {
				// If the email field is empty or it doesn't contain an email address
				// display the following error message.
				email.className += ' invalid';
				toggleErrorMsg('You need to enter a valid e-mail address.');
				return false;
			}

			return true;
		}

		function toggleErrorMsg(errorMsg) {
			error.className = error.className.replace(/\bshow\b/g, "");

			error.textContent = errorMsg;

			if (!!errorMsg) {
				error.className += ' show';
			}
		}

		form.addEventListener('submit', function (event) {
			if (!validateForm()) {
				 // Then we prevent the form from being sent by canceling the event
				event.preventDefault();
				return;
			}

			// Insert this line to track your conversions only when your visitor input valid information - You may remove the tracking conversion class of your submit button when adding this line
			om{{id}}.Listeners.convert();

			// Display the Success View to inform the visitor its information has been captured correctly
			om{{id}}.changeView('success');
		})
	})()
</script>
<style>
	#campaign-{{id}} span.error {
		color: white;
		background-color: #fb7d7d;
		border: 1px solid #8c0606 !important;

		font-size: 80% !important;

		padding: 5px !important;
		margin-top: 5px !important;

		box-sizing: border-box;

		display: none;
	}
	#campaign-{{id}} span.error.show {
		display: block;
	}
	#campaign-{{id}} input.invalid {
		border-color: #900 !important;
		background-color: #FDD !important;
	}
	#campaign-{{id}} input[type=text], #campaign-{{id}} input[type=email] {
		margin-top: 10px !important;
	}
	#campaign-{{id}} input[type=submit] {
		color: #fff;
		background-color: #3770d6;
		border: 0;

		margin-top: 20px;

		padding: 10px;
	}
</style>