0

次のコードがあり、どのフィールドが空または null であるかを指定するアラートを取得し、空または null フィールドごとにアラートを返す必要があります。私はJavaScriptが初めてで、これにかなり苦労しています。誰でもこれについてアドバイスをもらえますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
    function checkForm(form){
        var len = form.length;

        //create for loop
        for (var i=0; i<len; i++){
            if (form.elements[i].type=="text" || form.elements[i].type==null){
                if (form.fax number.value=="" || form.fax number.type==null){
                    alert("Please fill out the fax number field");
                }
            }
        }
    }

    function emailTest(emailText){
        var email = emailText.value;
        var emailPattern = /^.+@.+\..{2,}$/;
        if (!(emailPattern.test(email))) {
            alert("Please enter a valid email address.");
            document.myForm[1].focus();
        }
    }
// -->
</SCRIPT>

</HEAD>

<BODY>
<H3>Assignment 2 Form</H3>
<HR>

<FORM NAME="myForm" METHOD="post"
ACTION="mailto:joeschmoe@blahblah.ca">
    Name:<BR>
    <INPUT TYPE="text" size="30" NAME="name"><br>
    Email address:<BR>
    <INPUT TYPE="text" size="30" NAME="email address" onBlur="emailTest(this);"><br>
    Phone number:<BR>
    <INPUT TYPE="text" size="30" NAME="phone number"><br>
    Fax number:<BR>
    <INPUT TYPE="text" size="30" NAME="fax number"><p>
    <INPUT TYPE="submit" VALUE="Submit Data" onClick="return checkForm(this.form);">
    <INPUT TYPE="reset" VALUE="Reset Form">
</FORM>

</BODY>
</HTML>
4

1 に答える 1

1

わかりました... うわー。私はこれにあまりにも多くの時間を費やしました。フォームは次のようになります。

<FORM NAME="myForm" id="myForm">
<label for="name">Name:</label><br />
    <INPUT TYPE="text" size="30" NAME="name" /><br />
<label for="email_address">Email address:</label><BR />
    <INPUT TYPE="text" size="30" NAME="email_address" /><br />
<label for="phone_number">Phone number:</label><BR /> 
    <INPUT TYPE="text" size="30" NAME="phone_number" /><br />
<label for="fax_number">Fax number:</label><BR />
    <INPUT TYPE="text" size="30" NAME="fax_number" /><br />
    <INPUT TYPE="button" VALUE="Submit Data" onClick="return checkForm()" />
    <INPUT TYPE="reset" VALUE="Reset Form" />
</FORM>

フォームの概要:

  • フォーム要素にはラベルを使用する必要があります
  • name 属性や識別属性 (name、class、id) にスペースを使用しないでください。
  • inputs は/>、終了タグのないタグと同様に ( <br />too )で終了する必要があります
  • イベントを取り出してonBlur、全体的な検証プロセスの一部として追加しました。あまり複雑にする必要はありません
  • button入力タイプの代わりに入力タイプを使用しましたsubmit。JavaScript で理由を見る

そしてあなたのJavaScript：

function checkForm() {
    var valid = false; //Set a boolean variable that will be changed on each block 
                       //of validation
    if (document.myForm.fax_number.value === "") {
        alert("Please fill out the fax number field");
    }

    if (document.myForm.email_address.value === "") {
        alert("Email address is required");
    } else {
        valid = emailTest(document.myForm.email_address.value);
    }

    //all other checks within if statements

    if (valid) {
        document.myForm.action = "mailto:soandso@so.com";
        document.myForm.submit();
    }
}

function emailTest(emailText) {
    var emailPattern = /^.+@.+\..{2,}$/;
    var ret = false;
    if (!(emailPattern.test(emailText))) {
        alert("Please enter a valid email address.");
    } else {
        ret = true;
    }
    return ret;
}

Javascript のまとめ

  • HTML フォームと対話する JavaScript では、フォームは次のように呼び出されます。document.formNamewhereはform タグformNameの属性の文字列、またはwhereはページ上のフォームの数値インスタンスです。つまり、ページの最初のフォームは です。したがって、次のようになります。と呼ばれるname=""document.forms[i]ii = 0document.forms[0]
  • あなたの s属性からの文字列がどこにあるかについて、それぞれinputをチェックしてください。namevaluedocument.myForm.(elementName).valueelementName<input>name
  • を使用する代わりにsubmit、通常の を使用しましたbutton。フォームで [データを送信] ボタンをクリックすると、フォームが実行checkForm()され、すべてが有効であることを確認します
  • すべてが有効な場合、アクションをフォームに割り当て、document.myForm.action=youractionJavaScript 経由で送信します。document.myForm.submit()

ノート

  • これまで何かを学ぶためにW3Schoolsを使用しないでください。
  • フォームについて詳しくはこちら
于 2013-03-18T00:46:46.257 に答える