1

Web ベースのプログラミングの初心者としてpattern、javascript が原因で以下の属性フィールドがテキスト フィールドの有効性をチェックできない理由を理解するのに苦労しています。

<form id="aForm">
    <input type="text" pattern="^[ a-zA-Z0-9,#.-]+$" id="address" title="Standard address"/>        
<input type="submit" id="open" value="Start"/>
</form>

次に、フォームのコンテンツは JavaScript ファイルに送信さwebsocketれ、次のコード フラグメントのようにサーバーに送信されます。ただし、pattern属性によるフォームの検証は無視されます。

 $(document).ready(function() {

    $("#open").click(function(evt) {          
          evt.preventDefault();
          var form = $('#aForm').serialize();
          webSocket = new WebSocket("ws://localhost:9999/mh");
          webSocket.onopen = function()
          {
             webSocket.send(form);
          };
          REST OF CODE....

何らかの理由で、送信前にテキストがチェックされないようです。patternフォームが属性によって検証されるようにする理由と方法を知りたいです。

ありがとう

4

1 に答える 1

4

HTML5 フォームの検証は、実際にフォームを送信しようとしている場合、または JavaScript を明示的に使用して検証している場合にのみ実行されます1。

JavaScript は別のイベント (ボタンのクリック) にバインドされているため、その時点ではフォームの検証は実行されません。これは次の方法で解決できます。

  1. submitボタンのクリックではなく、送信をフォームのイベントにバインドする、または
  2. スクリプトの冒頭でフォ​​ーム検証 APIを使用します。

最初のオプションを強くお勧めします。それはよりセマンティックに意味があり、他の方法でフォームが送信されたときに正しく機能します（誰かがテキストフィールドでEnterキーを押したときにボタンのクリックがシミュレートされるかどうかは覚えていません.JavaScriptが$('#aForm').submit()プログラムで呼び出した場合、それは間違いなくトリガーされません. ...)。

1少なくとも、私が気づいたのはこれらの場所だけです。検証が行われるときに他のイベント/状況が存在する可能性もあります。

于 2012-12-29T17:15:21.900 に答える