输入值始终为 0 并阻止表单验证
Posted
技术标签:
【中文标题】输入值始终为 0 并阻止表单验证【英文标题】：Input value retrived always 0 and prevents form validation 【发布时间】：2019-12-11 01:10:41 【问题描述】：我必须使用 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”中动态插入带有消息的项目符号，然后在用户名字段不再为空时删除项目符号。
【问题讨论】：
【参考方案1】：您可以通过将 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>【讨论】：
你好！非常感谢：）这对我帮助很大！是的，感谢您指出 和 错误。这在我的原始代码中是正确的，但是由于我是在复制和粘贴，所以我并没有过多关注 html。谢谢！！！！！！！！！【参考方案2】：页面加载时#username 的值存储在name 中。
当您在页面加载后更改#username 的值时。 name 内部的值不会随之改变。
所以在你的函数内部你需要获取当前值：
$("#username").focusout(function ()
var name = $(this).val()
if (name.length == 0)
/* rest of the function */
第一个var name = $("#username").val() 会过时并可以删除。
【讨论】：
非常感谢！！这与上面的评论类似，并且有效:) 非常感谢你们俩花时间提供帮助！以上是关于输入值始终为 0 并阻止表单验证的主要内容，如果未能解决你的问题，请参考以下文章