Question

I have a form with JS functions for checking empty fields and submit form without refreshing all page, I’m looking for a way to integrate email check function into what I’m having now:

$(function() {
  $('.error').hide();
  $('input.text-input').css({backgroundColor:"#EBEBEB"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#EBEBEB"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#EBEBEB"});
  });

  $(".button").click(function() {
        // validate and process form
        // first hide any error messages
    $('.error').hide();
        }

      var name = $("input#name").val();
        if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
        var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
        var phone = $("textarea#phone").val();
        if (phone == "") {
      $("label#phone_error").show();
      $("textarea#phone").focus();
      return false;
    }

        var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;
        //alert (dataString);return false;

        $.ajax({
      type: "POST",
      url: "process.php",
      data: dataString,
      success: function() {
        $('#contact_form').html("<div id='message'></div>");
        $('#message').html("<h2>Email sent</h2>")
        .hide()
        .fadeIn(1000, function() {
          $('#message').append("<img id='checkmark' src='images/check.png' />");
        });
      }
     });
    return false;
    });
});
runOnLoad(function(){
  $("input#name").select().focus();
});

Thanks for help.

Answer 1

To check an email, you can use:

var emailReg = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i

function isEmail(email) {
  return emailReg.test(email);
}
//call isEmail wherever you need it

If I may comment further on your code, I would recommend you cache your selectors and reuse them:

var input = $('input.text-input');
input.css({backgroundColor:"#EBEBEB"}).focus(function() //... and so on

Also, if your DOM is correctly structured, you do not have to call your ids with input selectors, it just slows down your implementation because its iterating over every input in the DOM than just getting it directly. That means:

$("label#phone_error") // don't do this
$("#phone_error") // do this

Also, you can use a data object to pass to jquery, so rather than

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone;

Do this:

$.ajax(yoururl, {data: 
  {
    name: name,
    email: email,
    phone: phone
  }, // and so on