CODEWITHSUNDEEP
javascripthtmlcssvalidationemail
shaysilv
shaysilv

Reputation: 5

validating specific email address in form with javascript

I'm setting up a form and in it I've already coded verifying that there is an entry in the email form box as you can see here

function checkMailing(){
//if we want to refer to the email field - which has the name 'email' - we would use the form variable (created above), as such:
//theForm.email 
//you this with the name of any field iside of the form
//alert(theForm.email.value);

//use an if statement to check the value of the form
var mailingVal = theForm.mailing.value 
mailingVal = trim(mailingVal);

if(mailingVal == "" ){
    //error message

    //add a dropshadow to the field (to highlight it)
    theForm.mailing.style.boxShadow = "0px 0px 6px #01FFFF";

    //from the form field, go up to the parent (the div with the class 'formbox', then inside of that for the div with the class 'fieldInfo', and change the text contents to be an error message
    setMessage(theForm.mailing, "error", "You must enter an address");
    /*theForm.email.parentNode.querySelector("div").innerHTML = "You must enter an email!";
    theForm.email.parentNode.querySelector("div").className = "error";*/
}else{
    //if the user entered an email (or in this anything) give them positive feedback
    theForm.mailing.style.boxShadow = "";

    setMessage(theForm.mailing, "correct", "Perfect");

    /*theForm.email.parentNode.querySelector("div").innerHTML = "Perfect)"
    theForm.email.parentNode.querySelector("div").className = "correct";*/
    }   
}

However I need it to also validate that it is a CERTAIN email address and not just any email address. For example it must be an @gmail.com address and not an @hotmail.com or @anythingelse.com. Any guidance would be appreciated thank you!

Upvotes: 0

Views: 96

Answers (3)

daniel0mullins
daniel0mullins

Reputation: 1959

A better approach might be to use a regex which makes sure that the string to match ends with @gmail.com

var re = /@gmail\.com$/i; 

if(re.exec(mailingVal) !== null) {
    // the test passed!
}

This will ensure that the string ends with @gmail.com and does not contain any extra characters after the .com

Using that regex, [email protected] will match, but [email protected] will not. As will [email protected] or [email protected] (and so on) because of the /i switch.

If you wanted it to only match case-sensitively, just remove the /i switch, so the regex would read like

var re = /@gmail.com$/

Update

Here is the regex solution in your code, changed the exec to test (which just returns true or false, depending on whether the regex matches or not):

function checkMailing(){
    //if we want to refer to the email field - which has the name 'email' - we would use the form variable (created above), as such:
    //theForm.email 
    //you this with the name of any field iside of the form
    //alert(theForm.email.value);

    //use an if statement to check the value of the form
    var mailingVal = theForm.mailing.value,
       re = /@gmail\.com$/i;
    mailingVal = trim(mailingVal);

    if(!re.test(mailingVal)){
       //error message

       //add a dropshadow to the field (to highlight it)
       theForm.mailing.style.boxShadow = "0px 0px 6px #01FFFF";

       //from the form field, go up to the parent (the div with the class 'formbox', then inside of that for the div with the class 'fieldInfo', and change the text contents to be an error message
       setMessage(theForm.mailing, "error", "You must enter an address");
       /*theForm.email.parentNode.querySelector("div").innerHTML = "You must enter an email!";
       theForm.email.parentNode.querySelector("div").className = "error";*/

    } else {

      //if the user entered an email (or in this anything) give them positive feedback
      theForm.mailing.style.boxShadow = "";

      setMessage(theForm.mailing, "correct", "Perfect");

      /*theForm.email.parentNode.querySelector("div").innerHTML = "Perfect)"
      theForm.email.parentNode.querySelector("div").className = "correct";*/
  }   
}

This should work for you. I do have one question about the trim() function you are using. What is it? Is there a library you are using, or is the trim function something you wrote? I would just use String.prototype.trim to remove whitespace from the beginning and end of the mailingVal.

Upvotes: 1

paka
paka

Reputation: 1641

If you know wich exactly mail vendor you want to check, then try this one:

if (mailingVal.length && mailingVal.indexOf('@gmail.com') > -1 ) console.log('that is gmail!');

You also may need to put your string to lover case to be sure that 'Gmail' is also valid

mailingVal = mailingVal.toLowerCase()

UPD: as metioned in comments, this case will make mails like '[email protected]' also valid. To prevent that you can try this check:

mailingVal = mailingVal.split['@'];
 if (mailingVal.length > 2) {
   console.log('not Valid email');
 } else {
   if (mailingVal[1].toLowerCase() === 'gmail.com') console.log('Bingo!');
 }

Upvotes: -1

jcubic
jcubic

Reputation: 66650

You can use regex:

if (mailingVal && mailingVal.match(/@gmail\.com$/i)) {
    // it's gmail
}

Upvotes: 2

Related Questions