0

私はこのフォームに1つのフィールドがあります。ユーザーclicksまたはヒットしたときに、enter検証を実行してエラーメッセージを表示するか、フォームを送信するJavaScript関数を呼び出す必要があります。

ただし、ヒットenterすると、フォームは関係なく送信されます。（これまでのところ、JavaScript検証関数には）しかありませんalert ("Hello World")）

<form  action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
    <h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4> 
    <input type="text" name="pn" required placeholder="phone number" 
        title="Phone Number to Add to Do-Not-Call List" 
        onkeypress="if (event.keyCode == 13) document.getElementById('btnVldt').click()"/> <!-- all this is to treat [Enter] as a click -->
    <input id="btnVldt" type="button" value="Add Number to Do Not Call list" onclick="submitDNC()"/>
</form>

jsFiddleにすべてのページコードを追加しました。ここで、次のことをテストおよび検証できます。

  • ボタンをクリックすると、フォームが正しく送信されません
  • それを押すenterと、エラー404が表示されます。これは、ページを読み込もうとしていることを意味します。

これを追加しました：

実は、submitの代わりに使うbuttonとクリックしても動かない。しかし、jsFiddleそれでうまくいくようです。

4

4 に答える 4

2

ここでPraveenの答えを拡張して、関数、プレゼンテーション、およびコンテンツをさらに分離するために、JavaScriptを「目立たないように」記述します。

HTML

<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
    <h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4> 
    <input type="text" name="pn" required placeholder="phone number"  title="Phone Number to Add to Do-Not-Call List" />
    <button type='submit'>Add Number to Do Not Call list"</button>
</form>

（X）HTML5

ボックスに10桁の数字が必要な場合（数字のみ）、新しいブラウザー（Firefox、Chrome、IE10、Opera）の検証の形式として、HTML5patternの要素の属性を使用することもできます。<input>

<form action="add-another-number-to-dnc.cshtml" method="post" id="addDNCform">
    <h4>Enter 10-digit phone number without dashes, dots or parenthesis</h4> 
    <input type="text" name="pn" required placeholder="phone number" title="Phone Number to Add to Do-Not-Call List" pattern="[0-9]{10}" />
    <button type='submit'>Add Number to Do Not Call list"</button>
</form>

JavaScript（<script>ページのどこかにタグ内に配置）

function submitDNC(event) {
    var valid = false;

    alert('Hello world');
    // your validation logic goes here, sets valid to TRUE if it's valid

    if(!valid) {
        event.preventDefault();
    }
}

document.getElementById('addDNCform').addEventListener( 'submit', submitDNC, false );

フォームの送信時に検証するだけであれば、合成ボタンをクリックする必要はありません。HTML5では、検証ロジックが何であるかによっては、これにJavaScriptが必要ない場合もあります。

于 2013-01-21T18:58:27.723 に答える
0

あなたのsubmitDNC()関数では、return false;.

function submitDNC()
{
    alert("Hello World!");
    return false;
}

もう 1 つは、inputタイプを からbuttonに変更することsubmitです。使用する：

<input id="btnVldt" type="submit"
       value="Add Number to Do Not Call list" onclick="return submitDNC();" />

説明

イベント ハンドラーの戻り値によって、ブラウザーの既定の動作も実行する必要があるかどうかが決まります。リンクをクリックする場合、これはリンクをたどることになりますが、ユーザーが情報の入力を間違えた場合にフォーム送信をキャンセルできるフォーム送信ハンドラーでは、違いが最も顕著です。

別のオプション

Rinkが言うように、でreturn false;処理でき、処理する必要があるものに対してはやり過ぎですpreventDefault()。したがって、目立たない JavaScript を使用して、この方法を実行できます。

function submitDNC()
{
    alert("Hello World!");
    var e = window.event;
    e.preventDefault();
}
于 2013-01-21T18:46:28.923 に答える
0

ここであなたを悩ませているのはこれではありませんが、私は を Submit に変更します。いくつかの奇妙な理由で、ブラウザー プログラマーは、フォーム内のボタンが送信されたとブラウザーが想定するようにコーディングすることをお勧めします。関数を呼び出すように onkeypress を変更する必要があります。その関数で次のようにします。

function keyPressPhone() {
  if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
    document.getElementById("addDNCform").submit();
    return true;
  }
  else {
    return false; // somehow prevents the form from being submitted
  }
}
于 2013-01-21T18:53:21.557 に答える
0

Enter キーを押したときに送信されないようにするには、次のコードを使用します。

function checkEnter(e){
    e = e || event;
    var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
    return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

次に、ハンドラーをに追加しformます。

document.querySelector('form').onkeypress = checkEnter;
于 2013-01-21T18:52:07.237 に答える