0

さまざまなテキストボックスが含まれるHTMLフォームを作成しました。私がやりたいのは、テキストが入っていないボックスの横に小さな画像を表示するjavascriptスクリプトを作成することです。これが私がやりたいことの例です：

ここに画像の説明を入力してください

現時点では、フォームを希望どおりに検証する次のスクリプトを作成しましたが、画像やテキストの表示方法がわからないため、ポップアップボックスしか表示されません。これが私が持っているコードです：

    <script type="text/javascript">
    function validateForm()
    {
        var x=document.forms["email_form"]["name"].value;
        if (x==null || x=="")
        {
            alert("Please enter your name in the box provided.");
            return false;
        }

        var x=document.forms["email_form"]["email"].value;
        if (x==null || x=="")
        {
            alert("Please enter your e-mail address in the box provided.");
            return false;
        }

        var x=document.forms["message-title"]["name"].value;
        if (x==null || x=="")
        {
            alert("Please enter a message title in the box provided.");
            return false;
        }

        var x=document.forms["email_form"]["message"].value;
        if (x==null || x=="")
        {
            alert("Please enter your message in the box provided.");
            return false;
        }
    }
    </script>

誰かが私を正しい方向に向けることができますか？

4

2 に答える 2

1

入力要素の横にエラー画像要素を含めることができますが、cssで非表示にするdisplayプロパティを使用できます。入力要素にリンクされた各エラー画像のIDを持つことができます。たとえば、電子メール入力の場合は、そのほかにimg要素があります。このような最初のCSSを持っている->

#email_form img{
    display: none;
}

次に、JavaScriptで、非表示の画像を表示するだけです-

    var x=document.forms["email_form"]["email"].value;
    if (x==null || x=="")
    {
        var error_image = document.getElementById('error_email');
        error_image.style.display = 'inline';
        alert("Please enter your e-mail address in the box provided.");
        return false;
    }
于 2012-05-24T21:44:30.333 に答える
1

あなたの中でcssはクラスを定義します

.validateimage
{
 display:none;
}

そのクラスを次のようなすべての画像タグに割り当てます

<img class="validateimage" id="image1">
.
.
.

それから

 <script type="text/javascript">
        function validateForm()
        {
            var x=document.forms["email_form"]["name"].value;
            if (x==null || x=="")
            {
                document.getElementById('image1').style.display='block';
                return false;
            }

            var x=document.forms["email_form"]["email"].value;
            if (x==null || x=="")
            {
                document.getElementById('image2').style.display='block';

                return false;
            }

            var x=document.forms["message-title"]["name"].value;
            if (x==null || x=="")
            {
                document.getElementById('image3').style.display='block';
                return false;
            }

            var x=document.forms["email_form"]["message"].value;
            if (x==null || x=="")
            {
                document.getElementById('image4').style.display='block';
                return false;
            }
        }
        </script>
于 2012-05-24T21:48:49.957 に答える