자바 스크립트/AJAX 전자 메일 확인 기능 통합

Question

빈 필드를 확인하고 모든 페이지를 새로 고치지 않고 양식을 제출하는 JS 기능이있는 양식이 있습니다. 이메일 확인 기능을 현재 가지고있는 기능에 통합하는 방법을 찾고 있습니다.

$(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(); 
}); 

도움 주셔서 감사합니다.

Answer 1

이메일을 확인하려면, 당신은 사용할 수 있습니다 : 난 당신의 코드를 더 언급 할 수있는 경우

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 

, 나는 그들에게 당신이 당신의 선택기를 캐시 추천 재사용 것 :

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

을 또한, 경우 DOM이 올바르게 구조화되어 있고 입력 선택기로 ID를 호출 할 필요가 없으며 DOM을 입력하는 것보다 DOM의 모든 입력을 반복하므로 구현 속도가 느려집니다. 즉 의미

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

을 또한, 당신은이 작업을 수행 그래서 오히려

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

보다 JQuery와에 전달할 데이터 개체를 사용할 수 있습니다

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