0

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

<!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>

1 件の回答 1

1

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

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

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

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

試してみてください。

1
  • 無事動きました。ありがとうございます!
    – Suzu
    2021年11月16日 15:13

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。