Validate input field for correct emailid?

Question

I want a help in my Contact form. I want that when a user inputs his email id in input field & if it is wrong i.e without @ the input box should shake (which depicts an error) & when user enters correct email Id, it should accept it.

The problem in my current code is, when user enters correct email Id, even then the input field shakes. Need to validate the input field for correct Email.

Any help would be appreciated.

Thanks in advance.

<form id="form_id" method="post" action="<?php $_SERVER['PHP_SELF'] ?>" onsubmit="javascript:return validate('form_id','email');" novalidate>

<input type="text" id="email" name="email"   value="<?php if (isset($_POST["email"])) {echo $ema;} ?>" class="error"/> 
 <br><br>
<button type="submit" name="submit" class="getaccess-btn">Get Access </button>

</form>

The js for the same is:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script language="javascript">
function validate(form_id,email) {
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  var address = document.forms[form_id].elements[email].value;
if(reg.test(address) == false) {


$(document).ready(function(){
 $("button").click(function(){
$("#email").delay(0).animate({"left": "-=30px"}, 80).animate({"left": "+=60px"}, 80).animate({"left": "-=60px"}, 80).animate({"left": "+=60px"}, 80).animate({"left": "-=30px"}, 80);
 });
});
return false;
}}
</script>

this php code

<?php



$your_email = "youremailid@gmail.com"; // email address to which the form data will be sent
$subject = "Contact Message"; // subject of the email that is sent
$thanks_page = "thank-you.html"; // path to the thank you page following successful form submission

// Nothing needs to be modified below this line

if (isset($_POST["submit"])) {

    $ema = trim($_POST["email"]);
    if (get_magic_quotes_gpc()) { 
    $ema = stripslashes($ema);
    }

$error_msg=array(); 

if (empty($ema) || !filter_var($ema, FILTER_VALIDATE_EMAIL)) {
    $error_msg[] = "Your email must have a valid format, such as name@mailhost.com";
}

$email_body = 
    "Email of sender: $ema\n\n" .
    "$com" ; 

// Assuming there's no error, send the email and redirect to Thank You page

if  (!$error_msg) {
mail ($your_email, $subject, $email_body, "From: $nam <$ema>" . "\r\n" . "Reply-To:");
header ("Location: $thanks_page");
exit();
}  

} 

?>

The css for the same is:

.error{height:auto;width:100px;position:absolute;}

Answer 1

I can't understand your issue properly, but if you are working with email validation then there is no need of javascript. You can simply use email as input type in HTML5:

for ex, you can write as following:

<form>
    <input type="email" name="email" required>

    <input type="submit">

</form>

this will automatically validate input field for @ and ..

fiddle is here