时间戳

首页 > 解决方案 > 输入值始终为 0 并阻止表单验证

jquery - 输入值始终为 0 并阻止表单验证

问题描述

我必须使用 Jquery 验证表格作为我本周日作业的一部分。我需要检测一个字段是否为空并阻止表单输入，同时还将错误消息放入 id 为“divMessage”的 div 中。我想动态地做，但注意到我为一个字段检索的值总是为零。我不知道该怎么办，我很恐慌。如果我能正确理解这一点逻辑，我就可以自己完成剩下的作业。

尝试使用 $("username).val() 验证输入文本字段的值（一个字段的示例，“用户名”，如下所示），但结果始终为 0 。我很茫然。我已经简化了我的表单下面是为了减少故障排除的混乱。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add Movie Form</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
   $(document).ready(function () {
            var name = $("#username").val()
            error_username= false;

            // Prevention of form submission 
            $("#addMovieform").submit(function () {
                  if (error_username=false){
                    return false;
                  } else {return true;
                  }
            });

           //Dynamically add errorMessage in divMessage 
            $("#username").focusout(function () {
                if (name.length == 0) {
                    errorList.append("<li>Your name is required</li>")
                    $("li").eq(0).attr("class", "name_error_1");
                } else {
                    // Remove error message when name has been typed
                    $(".name_error_1").remove()
                }
            })

    });

<script>
<body>
 <div id="divMessage"></div>
        <table id="formtable">

            <colgroup>
                <col style="width: 20%;">
            </colgroup>
            <form action="/action_page.php" id="addMovieform" method="POST">

                <!-- Username -->
                <tr>
                    <td><label for="username">Name</label></td>
                    <td><input type="text" name="movie-username"id="username" 
                  placeholder="Your Name"></td>
                </tr>
              </form>
         </table>
</body>
</head>

希望在用户名字段为空时在“divMessage”中动态插入带有消息的项目符号点，然后在用户名字段不再为空时删除项目符号点。

标签： jqueryhtmlvalidationinputevent-handling

解决方案

var name = $("#username").val()您可以通过进入您的函数来解决此问题focusout，因为在您当前的代码中，您只能获得$("#username")一次的值，因此它永远不会更新

$("#username").focusout(function() {
  var name = $("#username").val()
  if (name.length == 0) {
    errorList.append("<li>Your name is required</li>")
    $("li").eq(0).attr("class", "name_error_1");
  } else {
    // Remove error message when name has been typed
    $(".name_error_1").remove()
  }
})

另外，请注意，您</head>应该在<body>开始之前关闭

演示

$(document).ready(function() {
  error_username = false;
  var errorList = $('.errorList')

  // Prevention of form submission 
  $("#addMovieform").submit(function() {
    if (error_username = false) {
      return false;
    } else {
      return true;
    }
  });

  //Dynamically add errorMessage in divMessage 
  $("#username").focusout(function() {
    var name = $("#username").val()
    if (name.length == 0) {
      errorList.append("<li>Your name is required</li>")
      $("li").eq(0).attr("class", "name_error_1");
    } else {
      // Remove error message when name has been typed
      $(".name_error_1").remove()
    }
  })

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divMessage"></div>
<table id="formtable">

  <colgroup>
    <col style="width: 20%;">
  </colgroup>
  <form action="/action_page.php" id="addMovieform" method="POST">

    <!-- Username -->
    <tr>
      <td><label for="username">Name</label></td>
      <td><input type="text" name="movie-username" id="username" placeholder="Your Name"></td>
    </tr>
  </form>
</table>
<div class="errorList"></div>

推荐阅读