0

VS 2010 を使用して ASP.NET Web フォーム アプリケーションを開発し、ページにログイン テキスト ボックスとパスワード テキスト ボックスを配置します。

それらの上に、ログイン テキスト ボックスまたはパスワード テキスト ボックスが空の場合にエラー メッセージを含む単純な div タグがあります。

JSFIDDLE

<div id="ErrorDiv"></div>

いずれかのテキスト ボックスが空の場合、この div を下にスライドさせてエラー メッセージを表示させたい

以下は私が試したjQueryコードです：

<script>
$(function () {

    $("#btnLogin").click(function () {    
        var error = 0;

        if (error == 0) {
            $("#ErrorDiv").slideToggle();
        }

        if ($("#txtLoginID").val() == "") {   
            error = 1;
            $("#ErrorDiv").text("Please Enter LoginID");
        }

        if ($("#txtPassword").val() == "") {
            error = 1;
            $("#ErrorDiv").text("Please Enter Password");
        }

        if (error == 1) {
            alert(document.getElementById("ErrorDiv").value());        
            $("#ErrorDiv").show(); 
        }

        else {
            alert(document.getElementById("ErrorDiv").value());
            $("#ErrorDiv").slideUP();
        }  
    });   
});
</script>

これは動作しません。

に置き換え $("#ErrorDiv").text("Please Enter LoginID");てみまし$("#ErrorDiv").html("Please Enter LoginID");たが、効果はありませんでした。

何が問題になる可能性がありますか?

4

2 に答える 2

1

これを試して

<div id="ErrorDiv" style="display:none;">Error</div>
<form>
    <input type="text" id="txtLoginID"/>
    <input type="password" id="txtPassword"/>
    <input type="submit" id="btnLogin"/>
</form>

脚本：

$("#btnLogin").click(function() {
    var error = '';
    if (error == '') {
        $("#ErrorDiv").hide();
    }
    if ($("#txtLoginID").val() == "") {
        error = 'Please Enter LoginID \n';
    }
    if ($("#txtPassword").val() == "") {
        error += 'Please Enter Password'
    }
    if (error != '') {
        alert(error);
        $("#ErrorDiv").text(error).show();
    } else {
        $("#ErrorDiv").slideUP();
    }
    return false;
});

フィドル

于 2013-05-21T09:04:00.700 に答える
1

まず、この行は機能しません

$("#ErrorDiv").slideUP();

そのはず

$("#ErrorDiv").slideUp(); //lower case p

次に、アラートdocument.getElementById("ErrorDiv").valueは div であるため機能しないため、値がありません。innerHTML であることを警告するdocument.getElementById("ErrorDiv").innerHTMLか、jQuery を使用することができます$('#ErrorDiv').text()

私もあなたの最初のif発言の要点がわかりません

if(error == 0)

ボタンがクリックされるたびに変数エラーを0に設定すると、このステートメントが常に実行されます。divこれがあなたがやりたかったことである場合は、常にslideToggleを使用することもできます。

var error = 0;
$('#ErrorDiv').slideToggle();

ここでフィドルを更新しました-> http://jsfiddle.net/d9Wwj/3/ ロジックの一部も変更しました。ErrorDivまた、エラーがなくなったときにクリアしていませんでした。

以下、完成記事です

$((function(){
  $("#btnLogin").click(function (){
     var error = "";
     $('#ErrorDiv').slideToggle();

     if($("#txtLoginID").val() == ""){
         error += "Please Enter LoginID";
     }
     if($("#txtPassword").val() == ""){
        if(error){
           error += "<br />Please enter a password";   
        } else {
           error += "Please enter a Password";  
        }        
     }

     if(!error){
        $("#ErrorDiv").html("").slideUp();
     } else {
        $('#ErrorDiv').html(error).slideDown();
     }
  });
});
于 2013-05-21T09:00:26.203 に答える