JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<body>
<div>
<label>Company Email</label>
<input id="email" type="text" />
</div>
</body>
</html>
JavaScript
//staring the plugin
(function ($) {
$.fn.checkCompDomain = function (options) { //exending the jQuery object with new method
var self = this;
//access the option passed to the plugin
var event = options.on; //event to watch
var success = options.success || (function () {}); //success method
var error = options.error || (function () {});// error method
var company_domain = options.domain || null; //domain is optional
//method to check whether email address is right
function validateEmail(email) {
var regex = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
return regex.test(email);
}
// a local method to validate the email address with domain passed
function check() {
var value = self.val(); //connecting email address pass in input tag
// check whether a valid email address
if(validateEmail(value)) {
var domain = value.split("@")[1]; // check entered email domain
if (company_domain !== null) { // check domain if passed as option
return domain == company_domain
}
return true;
}
return false;
}
// defining user defined event
if (typeof event != "String") {
self.bind(event, function () {
if (check()) {
success.call(self);
} else {
error.call(self);
}
});
}
};
})(jQuery);
$(function () {
$('input#email').checkCompDomain({
on: 'keyup', // events can be "blur" or "focus" when to run the validation
domain: "istacksoftware.com", // optional parameter to valid the domain of the email address
success: function () {
$(this).css("background-color",...