联系表单发送时无效的电子邮件

时间:2016-05-24 10:27:24

标签: javascript php html forms email-validation

发送时收到“无效的电子邮件”,即使电子邮件是正确的。我对这段代码有疑问。有人可以看一眼吗?

这是HTML

<form id="contact-form" action="email.php" method="post" class="clearfix">
    <div class="contact-box-hide">
        <div class="col-sm-6">
            <input type="text"  class="form-control" id="first_name" name="first_name" required placeholder="Navn">
            <span class="first-name-error"></span>
        </div>
        <div class="col-sm-6">
            <input type="text"  class="form-control" id="last_name" name="last_name" required placeholder="Efternavn">
            <span class="last-name-error"></span>
        </div>
        <div class="col-sm-6">
            <input type="email" class="form-control"  id="email" name="contact_email" required placeholder="Email">
            <span class="contact-email-error"></span>
        </div>
        <div class="col-sm-6">
            <input type="text"  class="form-control" id="subject" name="contact_subject" required placeholder="Hvor skal oplægget afholdes?">
            <span class="contact-subject-error"></span>
        </div>

    <!--<div class="col-sm-6">
            <label class=".radio-inline">
                <input type="radio" class="form-control" id="choice" name="options" required placeholder="Emne">
                <span class="contact-subject-error"></span>Option 1
            </label>
            <label class=".radio-inline" style="border-left: 0px;" >
                <input type="radio"  class="form-control" id="choice" name="options" required placeholder="Emne">
                <span class="contact-subject-error"></span>Option 2
            </label>                    
        </div>
        -->
        <!--<div class="col-sm-20">
            <input type="radio" class="form-control" id="contact_type" name="nummer 1" checked>
            <span class="contact-x-error"></span>
        </div>
        <div class="col-sm-20">
            <input type="radio" class="form-control" id="contact_type" name="nummer 1" checked>
            <span class="contact-x-error"></span>
        </div>
        -->
        <div class="col-sm-10">
            <textarea class="form-control" rows="5" id="message" name="message" required placeholder="Besked"></textarea>
            <span class="contact-message-error"></span>
        </div>
        <div class="col-sm-2">
            <button id="contact-submit" class="btn custom-btn col-xs-12" type="submit" name="submit"><a href=""></a><i class="fa fa-angle-right"></i></button>
            <span id="contact-loading" class="btn custom-btn col-xs-12"> <i class="fa fa-refresh fa-spin"></i> </span>
        </div>
    </div><!-- /.contact-box-hide -->
    <div class="contact-message"></div>
</form>     

这是email.php(.js正在调用的contact.php是完全相同的):

<?php
    if($_REQUEST['first_name'] == '' || $_REQUEST['contact_email'] == '' ||  $_REQUEST['message'] == ''):
        return "error";
    endif;
    if (filter_var($_REQUEST['contact_email'], FILTER_VALIDATE_EMAIL)):
        $subject = 'Fra Kriger til Kaemper - kontaktformular'; // Subject of your email
        // Receiver email address
        $to = 'geerrift@gmail.com';  //Change the email address by yours

        // prepare header
        $header = 'From: '. $_REQUEST['first_name'] . " " .$_REQUEST['last_name'] . ' <'. $_REQUEST['contact_email'] .'>'. "\r\n";
        $header .= 'Reply-To:  '. $_REQUEST['first_name'] . " " .$_REQUEST['last_name'] . ' <'. $_REQUEST['contact_email'] .'>'. "\r\n";
        // $header .= 'Cc:  ' . 'example@domain.com' . "\r\n";
        // $header .= 'Bcc:  ' . 'example@domain.com' . "\r\n";
        $header .= 'X-Mailer: PHP/' . phpversion();
        $message .= 'Name: ' . $_REQUEST['first_name'] . " " .$_REQUEST['last_name'] . "\n";
        $message .= 'Email: ' . $_REQUEST['contact_email'] . "\n";
        $message .= 'Subject: ' . $_REQUEST['contact_subject'] . "\n";
        $message .= 'Message: '. $_REQUEST['message'];
        // Send contact information
        $mail = mail( $to, $subject , $message, $header );
        echo 'sent';
    else:
        return "error";
    endif; 
?>

这是.js:

$('#contact-submit').click(function () {
    $('.first-name-error, .last-name-error, .contact-email-error, .contact-subject-error, .contact-message-error').hide();
    var first_nameVal = $('input[name=first_name]').val();
    var last_nameVal = $('input[name=last_name]').val();
    var emailReg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
    var emailVal = $('#contact_email').val();
    var contact_subjectVal = $('input[name=contact_subject]').val();
    var messageVal = $('textarea[name=message]').val();

    //validate 

    if (first_nameVal == '' || first_nameVal == 'First Name *') {
        $('.first-name-error').html('<i class="fa fa-exclamation"></i> Vi har brug for dit fornavn.').fadeIn();
        return false;
    }
    if (last_nameVal == '' || last_nameVal == 'Last Name *') {
        $('.last-name-error').html('<i class="fa fa-exclamation"></i> Vi har brug for dit efternavn.').fadeIn();
        return false;
    }
    if (emailVal == "" || emailVal == "Email Address *") {

        $('.contact-email-error').html('<i class="fa fa-exclamation"></i> Vi har brug for din mailadresse.').fadeIn();
        return false;

    } else if (!emailReg.test(emailVal)) {

        $('.contact-email-error').html('<i class="fa fa-exclamation"></i> Ugyldig mailadresse.').fadeIn();
        return false;
    }
    if (contact_subjectVal == '' || contact_subjectVal == 'Subject *') {
        $('.contact-subject-error').html('<i class="fa fa-exclamation"></i> Subject is required.').fadeIn();
        return false;
    }
    if (messageVal == '' || messageVal == 'Message *') {
        $('.contact-message-error').html('<i class="fa fa-exclamation"></i> Skriv venligst en henvendelse.').fadeIn();
        return false;
    }

    var data_string = $('.contact-form').serialize();

    $('#contact-submit').hide();
    $('#contact-loading').fadeIn();
    $('.contact-error-field').fadeOut();

    $.ajax({
        type: "POST",
        url: "php/contact.php",
        data: data_string,

        //success
        success: function (data) {

            $('.contact-box-hide').slideUp();
            $('.contact-message').html('<i class="fa fa-check contact-success"></i><div>Your message has been sent.</div>').fadeIn();
        },
        error: function (data) {

            $('.btn-contact-container').hide();
            $('.contact-message').html('<i class="fa fa-exclamation contact-error"></i><div>Something went wrong, please try again later.</div>').fadeIn();
        }

    }) //end ajax call
    return false;
});

请告诉我,如果我遗漏了任何东西,我会立即提供!

1 个答案:

答案 0 :(得分:1)

更改

var emailVal = $('#contact_email').val();

var emailVal = $('#email').val();

var emailVal = $('input[name="contact_email"]').val();

在您的电子邮件字段中,您的ID为email,名称为contact_email。在jQuery中使用哈希(#)时,您正在搜索ID,而不是名称。因此,您的脚本无法找到电子邮件值。