1

学習目的で、JS を使用して必要な userName フィールドを検証する簡単な javaScript 関数を作成しました。

私は2つの問題に直面しています -

  1. 送信ボタンで、onclick イベント ハンドラが checkRequiredメソッドを呼び出さず、フォームがポスト バックされます。
  2. Chrome デバッガーでブレークポイントを設定できません。
  3. コード内でデバッガーを排他的に使用しても、制御はデバッガーのブレークポイントにはなりません。

TaskManager.js

function checkRequired() {
    debugger;
    var userName = document.getElementById("txtUserName");
    if (userName.length == 0) {
        alert("username is required attribute");
        return false;
    }
    return true;
}

新規ユーザーの追加:

<html>
<head>
    <title>Add new User</title>
    <style type="text/css" media="all">
        button {
            width: 65px;
        }
    </style>
    <script src="TaskManager.js" type="text/javascript"></script>
</head>
<body>
    <form method="post" action="AddNewUser.html" style="width: 560px; height: 850px; margin-left: 10px; margin-top: 10px">
        <fieldset>
            <legend>New User</legend>
            <table>
                <tr>
                    <td>
                        <label>User Name:</label></td>
                    <td>
                        <input type="text" id="txtUserName" name="User Name" maxlength="10" /></td>
                </tr>

                <tr>
                    <td>
                        <button id="btnSubmit" type="submit" onclick="checkRequired()">Add User</button>
                    </td>
                    <td>
                        <button id="btnCancel">Cancel</button>
                    </td>
                </tr>

            </table>
        </fieldset>

    </form>

</body>
</html>

問題を解決するためにご協力いただきありがとうございます。

4

2 に答える 2

2

ブレークポイントに到達していない場合、何らかの理由で関数にアクセスできず、コンソールにエラーが表示されます。関数はグローバル スコープ内にありますか?

これがあなたのコードです。これを機能させるためにいくつかの変更を加えました。まず、ハンドラーの結果を考慮する必要があります。

<button id="btnSubmit" type="submit" onclick="javaScript:return checkRequired();">

.value.length次に、検証しようとしているテキストボックス内をチェックする必要があります。

var userName = document.getElementById("txtUserName");
if (userName.value.length === 0) {[...]

とにかく、可能であれば目立たないアプローチを使用し、イベントをマークアップで定義するのではなく、JavaScript コードで直接バインドすることをお勧めします。

var submitBtn = document.getElementById("btnSubmit");
submitBtn.onclick = function checkRequired() {
    console.log('aho');
    var userName = document.getElementById("txtUserName");
[...]
于 2012-10-26T06:32:13.467 に答える
0

スクリプト ファイルがロードされているかどうかを確認します。関数定義の外側のファイルの先頭にアラートを配置します。

アラートが表示されない場合は、スクリプト ファイルの名前を注意深く確認してください。scriptタグで参照されているものと同じですか？同じディレクトリにありますか？

于 2012-10-26T06:42:39.667 に答える