83646


メールフォームの作成において二つのメールアドレスが一致しないときにエラーメッセージを表示させたいのですがJavaScriptが全く機能していません。どこのコードをまちがえているのか解決法とともに教えていただきたいです。

[code]

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>mail form</title>
      </head>
      <body>
        <form action="https://cim.saddleback.edu/~jstudent0/formData.php">
        Email 1<input type="text" id="email1" name="email1"
                      pattern="\w+@\w{1,63}\.[a-z]{3}"
                      required="required"
                      title="Enter your email"/> <br>
        Email 2<input type="text" id="email2" name="email2"
                      pattern="\w+@\w{1,63}\.[a-z]{3}"
                      required="required"
                      title="Enter your email again"/> <br>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js">
          function checkMatch( ) {
      if( $("#email1").val() != "" &&
          $("#email1").val() == $("#email2").val() )
            return true;
    
      var msg = "Email2s not matching!"
       + $("#email2").val();
    
      console.log( msg );
      $("#prompt").text( msg );
      $("#prompt").css(
        { "color":"lime", "background-color":"black",
          "font-weight":"bolder" } );
      return false;
    }
    $(document).ready( function() {
    
    
      $("#email1").focus( function() {
        $("#prompt").text( "Enter First Email" );
      });
    
      $("#email1").blur( function() {
        $("#prompt").text( "Email2 must match email1");
      });
    
      $("#email2").keydown( function() {
        checkMatch();
        return true;
        //continue processing
      });
    
      $("form").submit( checkMatch );
    
    });
     </script>
     <input type="submit" /><input type="reset" />
      </body>
    </html>
    
[/code]


CC BY-SA 4.0
2021-11-15T14:47:40.267
83643
2021-11-16T01:46:12.440
2021-11-16T01:20:05.477
3060
48605
question
javascript jquery form
フォームの入力内容が一致しないときにメッセージを表示させたい


jQueryを読み込むscriptタグは、 `<head>` 内に書く必要があります。

[code]

    <head>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    
[/code]

そして、 `function checkMatch( ) {` 以下は `<body>` 内に `<script>` で囲って記載する必要があります。

[code]

    <body>
      <script>
        console.log("hoge");
      </script>
    </body>
    
[/code]

試してみてください。


CC BY-SA 4.0
2021-11-16T01:46:12.440
83646
2021-11-16T01:46:12.440
40092
83643
answer