Email validation

Developer
Dave
Size
3,528 Kb
Views
18,216
  1. Email validation Previews
  2. Email validation HTML Codes
  3. Email validation CSS Codes
  4. Email validation JS Codes

How do I make an email validation?

What is a email validation? How do you make a email validation? This script and codes were developed by Dave on 17 September 2022, Saturday.

Email validation Previews
IQ Test

Email validation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Email validation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Requirements</h1>
<ul> <li>Should grab emails by `type="email"`</li> <li>Leaving field should trigger validation check</li> <li>Should check format is [char > 0]@[char > 0].[char > 0]</li> <li>If error should add class of "is-invalid" to input</li> <li>If error should display an error message under the incorrect field</li> <li>Entering field should remove invalid class and error message</li>
</ul> <label for="email1">Email 1</label> <input id="email1" type="email"> <span class="error-message">error!</span> <br><br> <label for="email2">Email 2</label> <input id="email2" type="email"> <span class="error-message">error!</span>
<br><br><br><br><br>
<h1>Requirements</h1>
<ul> <li>Should focus on chip number text field when "chipped" radio selected</li>
</ul>
<div class="c-radio-switch-container h-spacing"> <p class="c-radio-switch"> <input id="chipped" type="radio" value="true" name="is_chipped" class="c-radio-switch__input js-field-toggle-trigger" data-set-target-display="chip-number-wrap, block"> <label for="chipped" class="c-radio-switch__label">Yes</label> </p> <p class="c-radio-switch"> <input id="not-chipped" type="radio" value="false" name="is_chipped" class="c-radio-switch__input js-field-toggle-trigger" data-set-target-display="chip-number-wrap, none"> <label for="not-chipped" class="c-radio-switch__label">No</label> </p>
</div>
<p id="chip-number-wrap" style="display: none" class="h-spacing js-field-toggle-target"> <label for="chip-number">Chip number:</label> <input type="text" id="chip-number" name="chip_number" class="c-textual-input">
</p> <script src="js/index.js"></script>
</body>
</html>

Email validation - Script Codes CSS Codes

.is-invalid { border: solid 1px #cc0000;
}
.error-message { display: none;
}
.is-invalid + .error-message { display: block;
}
.is-hidden { display: none;
}

Email validation - Script Codes JS Codes

'use strict';
var showHiders = document.getElementsByClassName('js-field-toggle-trigger');
for (var i = 0; i < showHiders.length; i++) { showHiders[i].addEventListener('click', showHideFields);
}
// Show/hide form fields depending on toggle
var showHideFields = function showHideFields(e) { var str = e.target.dataset.setTargetDisplay; str = str.split(','); // Get target element and the display type var target = id(str[0]); var targetDisplayType = str[1]; setTargetDisplay(target, targetDisplayType);
};
var setTargetDisplay = function setTargetDisplay(el, displayType) { var element = el; if (displayType) { element.style.display = displayType.trim(); } else if (element.style.display === 'none') { element.style.display = 'block'; } else { element.style.display = 'none'; } return element;
};
var validateEmails = function validateEmails() { var emails = document.querySelectorAll('[type=email]'); for (var i = 0; i < emails.length; i++) { emails[i].addEventListener('blur', function (e) { if (!isValid(e.target.value, /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i)) e.target.classList.add('is-invalid'); }); emails[i].addEventListener('focus', function (e) { e.target.classList.remove('is-invalid'); }); }
};
var isValid = function isValid(val, regx) { return regx.test(val);
};
validateEmails();
Email validation - Script Codes
Email validation - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded September 17, 2022
Rating 3
Size 3,528 Kb
Views 18,216
Do you need developer help for Email validation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave (DaveOrDead) Script Codes
Name
Flexbox grid mark 2
Inline-block grid
Table drag
Scrollable tables
Words at War
Validation fun
Webpack config
Javascript Binding
Password validation
React Tic Tac Toe
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!