0

私は非常に単純なjavascriptフォーム検証スクリプトを書いています:

      function validateForm(){
        var x=document.forms["contactForm"]["firstname"].value;
        if (x==null || x==""){
            return false;
        }

        var y=document.forms["contactForm"]["lastname"].value;
        if (y==null || y==""){
            return false;
        }

        var z=document.forms["contactForm"]["emailaddress"].value;
        var atpos=z.indexOf("@");
        var dotpos=z.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=z.length){
            return false;
        }
        var msg_area = document.getElementById("message");
        msg_area.innerHTML = "";
        if (document.getElementById("message").value.length < 20) {
            return false;
        }
        else document.getElementById("contactForm").submit();
    }   

このフォームを検証することになっています:

 <form name="contactForm" onsubmit="return validateForm()" action="./thankyou.html" method="post">
        <label for="firstName">First Name <sup>*</sup></label>
        <input name ="firstname" id="firstName" type="text" placeholder="First Name" required />
        <label for="lastName">Last Name <sup>*</sup></label>
        <input name ="lastname" id="lastName" type="text" name="lastName" placeholder="Last Name" required />
        <label for="emailaddress">Email address <sup>*</sup></label>
        <input name="emailaddress" id="emailAddress" type="email" placeholder="something@example.com" required />
        <label for="message">Message<sup>*</sup></label>
        <textarea id="message" placeholder="Remember, be nice!" required></textarea>
        <input type="submit" name="submit" value="Email Me!" class="emailsub" />
        <p class="small"><sup>*</sup> denotes a required field.</p>
    </form>

送信されたとき、実際にはjavascriptをまったく呼び出していないようです。それが探す唯一のことは、それがhtmlの「必要な」部分を満たしているということです。私はjavascriptにかなり慣れていないので、問題がどこにあるかはおそらく明白ですが、自分で見つけることはできません。

どんな助けでも大歓迎です!

psこれは現時点ではローカルWebサイト用であるため、action=""はメッセージを処理するためのページではなく別のhtmlに移動します。これはおそらくここでの問題ですか?

4

1 に答える 1

0

html5の「必須」属性は、続行する前に検証するようにブラウザに指示します。詳細については、こちらをご覧ください。これは、基本的な検証(必須フィールドと電子メール)に合格しない限り、(サポートされているブラウザーで)javascript関数が呼び出される前にイベントを停止することを意味します。

javascriptを実行して独自の検証を実行する場合は、「required」属性を削除する必要があります。より複雑なhtmlフォームの検証を試すこともできます。これはこのテーマに関する良い記事です。

于 2012-05-25T21:37:29.130 に答える