1

お問い合わせフォームを作成中です。head には 2 つの JavaScript 関数があります (後で移動しますが、それは別の質問です)。

onblur イベントの最初の関数 は機能しますValidate()が、希望どおりには機能しません。formValidate()onsubmit イベントの 2 番目の関数 が機能します。

HTML onblur イベントで使用する JavaScript 関数に switch ステートメントがあります。

JavaScript コード:

<head>
    <script type="text/javascript">
        function Validate()
        {
            // Create array containing textbox elements
            var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email12'), document.getElementById('message')];

            // Loop through each element to see if value is empty
            for (var i = 0; i<input.length; i++)
            {
                if (input[i].value == '')
                {
                    switch( input[i].id){
                        case 'fname':
                        alert ('enter you first name');
                        break;

                        case 'lname' :
                        alert ('enter your last name');
                        break;

                        case 'email1':
                        alert ('enter your email address');
                        break;

                        case 'email2':
                        alert ('enter your email address');
                        break;

                        case 'message':
                        alert ('write your message');
                        break;
                    }
                }
            }
        }

        function formValidate()
        {
            // Create array containing textbox elements
            var inputs = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];
            var error;

            // Loop through each element to see if value is empty.
            for(var i = 0; i<inputs.length; i++)
            {
                if(inputs[i].value == '')
                {
                    error = 'Please complete all fields.';
                    alert(error);
                    return false;
                }
            }
        }
    </script>
</head>

HTML:

<form onsubmit="return formValidate()"  action="mailto:admin@sfasc.com.au" method="post"  id="contactForm" >
    <fieldset>
        <dl>
            <dt> First Name:</dt>
            <dd>
              <input class="input" type="text"  name="fname" id="fname" onblur="Validate()" />
            </dd>
            <dt> Last Name:</dt>
            <dd>
              <input class="input" type="text"  name="lname" id="lname" onblur="Validate()"/>
            </dd>
            <dt> Email Address:</dt>
            <dd>
              <input class="input" type="text"  name="email1"  id="email1" onblur="Validate()"/>
            </dd>
            <dt> Email Address:</dt>
            <dd>
              <input class="input" type="text"  name="email2"  id="email2" onblur="Validate()"/>
            </dd>
            <dt> Message:</dt>
            <dd>
              <textarea  name="address" id="address" rows="10" cols="10" onblur="Validate()"></textarea>
            </dd>
            <dd>
              <input type="submit" value="submit" name="submit"  />
            </dd>
        </dl>
    </fieldset>
</form>

これを除いて、コードは機能します。フィールドをクリックすると、次のアラートが表示されます。

JavaScript アラート

クリックしてポップアップを防止すると、アラートが完全に停止します。[OK] をクリックすると、次のフィールド (fname から lname など) に移動し、ユーザーがデータを入力できないように、フィールドを続行します。

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

3

残念ながら、検証コード全体を再考する必要があります。次に起こっています：

  1. ユーザーは「名」を入力します
  2. inputスクリプトは配列を反復します
  3. round1: fnameOK --> はい、次へi
  4. round2: lnameOK --> いいえ、アラートを表示
  5. round3: email1OK --> いいえ、アラートを表示します ...

これが繰り返され、最終的にユーザーが次のフィールドを入力できるようになると、上記のループが再度実行されますが、新しいループごとにアラートが 1 つ少なくなります。

簡単な修正は次のようになります。

function Validate(id) {
    var errors = {
        fname: 'enter you first name',
        lname: 'enter your last name',
        email1: 'enter your email address',
        email2: 'enter your email address',
        message: 'write your message'
    };
    if (document.getElementById(id).value === '') {
        if (id in errors) {
            alert(errors[id]);
        }
    }
    return;
}

HTML では、対応idする を渡すだけValidate()です:

<input class="input" type="text"  name="fname" id="fname" onblur="Validate('fname')" />

しかし、私はこの迷惑な動作を見つけます。送信時に検証を行い、空のフィールドがある場合は送信をキャンセルすると、より快適になります。

于 2013-06-13T14:52:15.790 に答える
3

これがあなたが望むものだと思います：

デモ

すべての入力 onblur を検証する代わりに、フォーカスを残したものだけを検証します。そのために、要素をValidate(this)HTML インライン コードに渡しました。また、いくつかの要素 ID の問題もありました (メッセージ フィールドがないなど)。.focus()入力が無効な場合にフォーカスを維持するための呼び出しも追加しました。

function Validate(elem) {
    // create array containing textbox elements
    var input = [document.getElementById('fname'), document.getElementById('lname'), document.getElementById('email1'), document.getElementById('email2'), document.getElementById('message')];

    for (var i = 0; i < input.length; i++)
    // loop through each element to see if value is empty
    {
        if (input[i].value == '' && elem.id == input[i].id) {
            switch (input[i].id) {

                case 'fname':
                    alert('enter you first name');
                    break;
                case 'lname':
                    alert('enter your last name');
                    break;
                case 'email1':
                    alert('enter your email address');
                    break;
                case 'email2':
                    alert('enter your email address');
                    break;
                case 'message':
                    alert('write your message');
                    break;
            }

            elem.focus();
        }
    }
}

多くalert()の はかなり厄介ですが、代わりにエラーメッセージとともに各テキストボックスの横にスパンを表示する方がはるかに優れていると言わざるを得ません.

于 2013-06-13T15:01:49.713 に答える