1

フォームを検証するために、onsubmit を介して JavaScript 関数をトリガーしようとしています。

フォームのマークアップの直後にスクリプト タグ内で関数を呼び出すことができるため、関数自体が機能することはわかっています。また、console.log メッセージを受信し、作成されたエラー メッセージがフォームに表示されます。

PHP 検証自体は機能しますが、実際には.submit、div に配置された JavaScript を介してフォームを送信することしかできませんでした。明らかに、これはクライアント側の検証をバイパスするため、そのままにしておくことはできませdiv id="submit"んinput type="submit"。

過去に自分でコーディングしたフォームなど、他の例を見てきましたが、機能することがわかっており、完全に答えがないようです。これはおそらく非常に簡単で、何らかの理由で、過去 6 時間、それを見ることができませんでした。o_O

ここに私のフォームのマークアップがあります:

<form name="emailus" id="emailus" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return validateForm();">
    <a href="mailto:example@email.com">
        <h3><i class="icon-envelope-alt icon-large"></i>Send us an email<span>: example@email.com</span></h3>
    </a>

    <div class="half">
        <fieldset class="name">
            <label for="cf_name"><h4>Name <span>*</span></h4></label>
            <input type="text" name="cf_name" class="textualformfield" alt="Jane Doe" pattern="^[a-zA-Z'\s]+$">
        </fieldset>
        <fieldset class="emailaddress">
            <label for="cf_email"><h4>E-mail <span>*</span></h4></label>
            <input type="text" name="cf_email" class="textualformfield" alt="janedoe@email.com" pattern="{long string of regex}">
        </fieldset>
        <fieldset class="phonenumber">
            <label for="cf_phonenumber"><h4>Phone</h4></label>
            <input type="tel" name="cf_phonenumber" class="textualformfield" alt="555-555-5555">
        </fieldset>
        <fieldset class="eventdate">
            <label for="cf_eventdate"><h4>Event Date</h4></label>
            <input type="text" name="cf_eventdate" class="textualformfield" alt="May 25th, 2012">
        </fieldset>
        <fieldset class="location">
            <label for="cf_location"><h4>Location</h4></label>
            <input type="text" name="cf_location" class="textualformfield" alt="The Church">
        </fieldset>
    </div>

    <div class="half">
        <textarea name="cf_message" class="textualformfield" alt="Your Message"></textarea>
    </div>

    <input type="submit" for="emailus" name="submit" id="submit" value="Submit">
</form>

私はいくつかの異なる反復を試みましonsubmit="return validateForm();"た—セミコロンの有無にかかわらず、またはと書いてonSubmit...onsubmitわかりません。これの何が悪いのか全くわかりません。誰？

onsubmit以下は、呼び出される関数validateFormです。これは別のファイルにありますが、フォームが存在する場合は常にファイルが含まれます。この関数が含まれていないことを確認し$(document).ready、フォームの直後のスクリプト タグ内から呼び出したので、グローバルに使用できるようにしました。

var validateForm = function() {
    var valid = true;

    jQuery('p.validationhelpers').remove();

    if (document.emailus.cf_email.value == "" || document.emailus.cf_email.value == "janedoe@email.com") {
        jQuery('.emailaddress').append("<p class='validationhelpers'>Please enter an email address.</p>");
        jQuery('.emailaddress>input').focus();
        valid = false;
    }

    if (document.emailus.cf_name.value == "" || document.emailus.cf_name.value == "Jane Doe") {
        jQuery('.name').append("<p class='validationhelpers'>Please enter your name.</p>");
        jQuery('.name>input').focus();
        valid = false;
    }
    console.log("I was triggered");

    return valid;
}

編集 2: PHP 検証/ポスト コードを追加:

<?php if (!empty($_POST) ) { 
    $field_name = $_POST['cf_name'];
    $field_email = $_POST['cf_email'];
    $field_phone = $_POST['cf_phonenumber'];
    $field_eventdate = $_POST['cf_eventdate'];
    $field_location = $_POST['cf_location'];
    $field_message = $_POST['cf_message'];

    $mail_to = 'example@email.com';

    //final attempt at validation or email submission preventation
    if ($field_name == "Jane Doe" || empty($field_name) || $field_email == "janedoe@email.com" || empty($field_email)) {
        return false;
    }


    if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate) && !($field_name == "Jane Doe") && !empty($field_name)) {
        $subject = 'Request for '.$field_date. ' from '.$field_name . 'via thiswebsite.com';
    } else {
        $subject = $field_name . ' has contacted you via thiswebsite.com';
    }

    if (!($field_name == "Jane Doe") && !empty($field_name)) {
        $body_message = 'Client\'s Name: '.$field_name."\n\n";
    }
    if (!($field_email == "janedoe@email.com") && !empty($field_email)) {
        $body_message .= 'E-mail: '.$field_email."\n\n";
    }
    if (!($field_phone == "555-555-5555") && !empty($field_phone)) {
        $body_message .= 'Phone: '.$field_phone."\n\n";
    }
    if (!($field_eventdate == "May 25th, 2012") && !empty($field_eventdate)) {
        $body_message .= 'Event Date: '.$field_eventdate."\n\n";
    }
    if (!($field_location == "The Church") && !empty($field_location)) {
        $body_message .= 'Location: '.$field_location."\n\n";
    }
    if (!($field_message == "Your Message") && !empty($field_message)) {
        $body_message .= 'Message: '. "\n".$field_message;
    }

    $headers = 'From: '.$field_email."\r\n";
    $headers .= 'Reply-To: '.$field_email."\r\n";

    $mail_status = mail($mail_to, $subject, $body_message, $headers);

    $body_message = stripslashes($body_message);

    if ($mail_status) { ?>
        <script language="javascript" type="text/javascript">
            jQuery(document).ready(function () {
                jQuery('#contactus').before("<hr class='confirmationhelpers'><p class='confirmationhelpers'>Your e-mail has been sent!<br/>Thank you! We'll contact you shortly.</p><hr class='confirmationhelpers'>");
            });
        </script>
    <?php
    }
    else { ?>
        <script language="javascript" type="text/javascript">
            jQuery(document).ready(function () {
                alert('It seems there\'s been an error. Please, send an email to example@email.com to request your appointment.');
            });
        </script>
    <?php
    }
}

?>

念のため言っておきますが、[送信] ボタンをクリックしても、まったく何も起こりません。

4

2 に答える 2

2

あなたのjQueryはフォーム送信をブロックしています:

//this hides the contact form if the overlay is clicked. children is there to prevent the children from also having this effect.
    $('.overlay_vertical_align').click(function() {
        $('.grey_overlay').fadeOut('slow');
    }).children().click(function(e) {
        return false;
    });

つまり、サイトをデバッグして送信ボタンを押すと、return false;上記に到達し、その後イベント処理が終了します。

于 2013-03-20T11:44:03.133 に答える
0

何も起こらない理由は、検証関数に到達する前に入力を正規表現検証しようとする新しい html5 'pattern' 属性を使用しているためです。パターン属性を削除して、再試行してください。

于 2013-03-20T10:57:43.540 に答える