Values passing to multiple conditionals in JavaScript

Question

I have a input field where I'm checking these two conditions...

1. If the input field is a valid email format

2. If the input field ends in a specific domain

    $('#newsletter_submit').on('click', function () { document.getElementById('newsletter_text').removeAttribute('required') var $emailFieldValue = $('#newsletter_text').val(); var $splitEmailFieldValue = $emailFieldValue.split('@'); var $result = $('#result') function isValidEmailAddress(emailAddress) { var pattern = /^([az\\d!#$%&'*+\\-\\/=?^_`{|}~\ -\퟿\豈-\﷏\ﷰ-\￯]+(\\.[az\\d!#$%&'*+\\-\\/=?^_`{|}~\ -\퟿\豈-\﷏\ﷰ-\￯]+)*|"((([ \\t]*\\r\\n)?[ \\t]+)?([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f\\x21\\x23-\\x5b\\x5d-\\x7e\ -\퟿\豈-\﷏\ﷰ-\￯]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f\ -\퟿\豈-\﷏\ﷰ-\￯]))*(([ \\t]*\\r\\n)?[ \\t]+)?")@(([az\\d\ -\퟿\豈-\﷏\ﷰ-\￯]|[az\\d\ -\퟿\豈-\﷏\ﷰ-\￯][az\\d\\-._~\ -\퟿\豈-\﷏\ﷰ-\￯]*[az\\d\ -\퟿\豈-\﷏\ﷰ-\￯])\\.)+([az\ -\퟿\豈-\﷏\ﷰ-\￯]|[az\ -\퟿\豈-\﷏\ﷰ-\￯][az\\d\\-._~\ -\퟿\豈-\﷏\ﷰ-\￯]*[az\ -\퟿\豈-\﷏\ﷰ-\￯])\\.?$/i; return pattern.test(emailAddress); } if (!isValidEmailAddress($emailFieldValue)) { $result.animate({ 'opacity': 0 }, 0, function () { $(this).text('Must be a valid email format').css('color', 'red'); }).animate({ 'opacity': 1 }, 500); var obj = {} obj['$emailFieldValue'] = $emailFieldValue console.log('obj.$emailFieldValue', typeof obj.$emailFieldValue) if (($splitEmailFieldValue[1].toLowerCase()) !== 'acme.com')) { $result.animate({ 'opacity': 0 }, 0, function () { $(this).text('Only Acme employees can register ie joe@acme.com').css('color', 'red'); }).animate({ 'opacity': 1 }, 500); } } else { $result.animate({ 'opacity': 0 }, 0, function () { $(this).text('Thanks for registering').css('color', 'green'); }).animate({ 'opacity': 1 }, 500); } }) 

Currently it just ignores the domain specific conditional and allow one to enter clark.kent@dailyplanet.com and I get the error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Not sure why that is happening, as I checked:

 var obj = {}
     obj['$emailFieldValue'] = $emailFieldValue
     console.log('obj.$emailFieldValue', typeof obj.$emailFieldValue)

And get string?! But the error says undefined?

Answer 1

I recommend splitting the validation and later do the validations, take a look.

 function isValidEmailAddress(emailAddress) { var pattern = /^([az\\d!#$%&'*+\\-\\/=?^_`{|}~\ -\퟿\豈-\﷏\ﷰ-\￯]+(\\.[az\\d!#$%&'*+\\-\\/=?^_`{|}~\ -\퟿\豈-\﷏\ﷰ-\￯]+)*|"((([ \\t]*\\r\\n)?[ \\t]+)?([\\x01-\\x08\\x0b\\x0c\\x0e-\\x1f\\x7f\\x21\\x23-\\x5b\\x5d-\\x7e\ -\퟿\豈-\﷏\ﷰ-\￯]|\\\\[\\x01-\\x09\\x0b\\x0c\\x0d-\\x7f\ -\퟿\豈-\﷏\ﷰ-\￯]))*(([ \\t]*\\r\\n)?[ \\t]+)?")@(([az\\d\ -\퟿\豈-\﷏\ﷰ-\￯]|[az\\d\ -\퟿\豈-\﷏\ﷰ-\￯][az\\d\\-._~\ -\퟿\豈-\﷏\ﷰ-\￯]*[az\\d\ -\퟿\豈-\﷏\ﷰ-\￯])\\.)+([az\ -\퟿\豈-\﷏\ﷰ-\￯]|[az\ -\퟿\豈-\﷏\ﷰ-\￯][az\\d\\-._~\ -\퟿\豈-\﷏\ﷰ-\￯]*[az\ -\퟿\豈-\﷏\ﷰ-\￯])\\.?$/i; return pattern.test(emailAddress); } function isValidDomainAddress(emailAddress) { return emailAddress.toLowerCase() === 'acme.com'; } $('#newsletter_submit').on('click', function () { document.getElementById('newsletter_text').removeAttribute('required') var $emailFieldValue = $('#newsletter_text').val(); var $splitEmailFieldValue = $emailFieldValue.split('@'); var $result = $('#result'); var isValid = isValidEmailAddress($emailFieldValue); if (!isValid) { $result.animate({ 'opacity': 0 }, 0, function () { $($result).text('Must be a valid email format').css('color', 'red'); }).animate({ 'opacity': 1 }, 500); } var obj = {} obj['$emailFieldValue'] = $emailFieldValue console.log('obj.$emailFieldValue', typeof obj.$emailFieldValue); var isValidDomain = isValid? isValidDomainAddress($splitEmailFieldValue[1]): false; if (isValid && !isValidDomain) { $result.animate({ 'opacity': 0 }, 0, function () { $(this).text('Only Acme employees can register ie joe@acme.com').css('color', 'red'); }).animate({ 'opacity': 1 }, 500); } if(isValid && isValidDomain){ $result.animate({ 'opacity': 0 }, 0, function () { $(this).text('Thanks for registering').css('color', 'green'); }).animate({ 'opacity': 1 }, 500); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="newsletter_text" required/> <div id="result"></div> <br/> <button id="newsletter_submit" type="button">Submit</button>