Function to validate Email syntax/frmat

Question

This should be a very simple function to implement in my PHP code

But, for some reason, I can't get it to work.

I am creating two functions for my email attribute :

the first function should validate the syntax/format of the email, and ensure that it is correct

The second function should then compare the two email fields (first field is email, second field is "confirm email). If the user enters two different emails, he will get an error.

Here are the two functions (javascript) :

function validateEmail() {
    var email = document.getElementById("email").value
    if (!filter_var(email, FILTER_VALIDATE_EMAIL))
    {
        alert("You have entered an invalid email address !");
        return false;
    }
    return true;
}


function confirmEmail() {
    var email = document.getElementById("email").value
    var email2 = document.getElementById("email2").value
    if (email != email2) {
        alert('The email addresses you entered do not match !');
        return false;
    }
    return true;
}

The strange thing is : the second function is working perfectly. However, the first one is not.

For the second function, I added the following property to the Form : onSubmit="return confirmEmail()"

For the first function, I have NO IDEA what to do ((((

I tried adding it to the Form also : onSubmit="return confirmEmail() && validateEmail()"

But, no luck.

Secondly, I tried to add the first function to the email attribute itself in the form :

Still doesn't work.

So, I decided to try "onkeyup"

(Actually, this is a bit silly; because, it means that : the function will trigger the moment the user begins to type in the email field. Which is nonsense. The function should work only after the user has input the email, and moved on to the next field in the form)

Anyway, since JavaScript was not working, I decided to try simple PHP.

I found this on google :

<?php

$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $emailErr = "Invalid email format";
}

?>

And, still not working. I have no idea what I am doing wrong.

(a) am I calling the Javascript wrongly ? (b) am I using the PHP code somewhere I shouldn't be using it??

All in all, I'm at a loss.

UPDATE :

Please, ignore that PHP nonsense I wrote inside the JavaScript function

It was an error.

Here is the actual JS function for validateEmail :

     function validateEmail() { 
      var email = document.getElementById("email").value  
      var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9] 
                   {2,4})+$/;;
     if (email.val() == '' || !filter.test(email.val()))
     {
     alert('You have entered an invalid email address !!');
     email.focus();
     return false; }
     return true; }

And, while we are on the subject, perhaps I should elaborate further.

Earlier on, I created a third email-function...........to determine if the email being entered already exists within the MySQL database.

Here is the function I used :

    <SCRIPT type="text/javascript">

    $(document).ready(function() {  

   var min_chars = 4;  

    var characters_error = 'You must enter a minimum of 4 characters!';   
    var checking_email = 'Checking Email Validity....';

$('#email').keyup(function(){    
    //run the character number check  
    if($('#email').val().length < 4) {  

        $('#email_availability_result').html(characters_error);  }
        else{  

        $('#email_availability_result').html(checking_email);  
        check_email();  
      }  
      });
      });  


      //function to check email AVAILABILITY in database

      function check_email(){  
           var email = $('#email').val(); 
           var button_check_email=true;

     //use ajax to run the check  
     $.post("check.php", { email: email },  
     function(email_result){  
        //if the result is 1  
        if(email_result == 1){  
            //show that the email is available  
            button_check_email=false; 
            document.getElementById("submit").disabled = false;
            $('#email_availability_result').html('that email is available');  
        }else{  

            button_check_email=true; 
            document.getElementById("submit").disabled = true;
            $('#email_availability_result').html('Email address [' + email + 
                          '] is already registered in our database.');
             }  
             });  
             }  
            </SCRIPT>

This script also works perfectly.

However, the first part of the script is a waste of time.

There was no need to insert a function for counting "the number of characters"

(HTML provides the "minlength" property for data values)

So, what I need to do it remove that part completely, and somehow replace it with something more useful...........such as : checking the VALIDITY of the email address.

Trouble is : I tried, but only messed up the code ))))

Answer 1

You're calling filter_var in your javascript code. Filter_var is a php function that javascript knows nothing about.

You can do email validation directly in the html as of html5. On the input, put type="email" and add required to the input. This will force the input to be an email.

<input type="email" required  ...

If you want to use JS, here is a dumb implementation:

function validateEmail() {
    var email = document.getElementById("email").value;
    if (email.indexOf('@') > email.indexOf('.') > email.length)
    {
        return true;
    }
    alert("You have entered an invalid email address !");
    return false;
}