当输入字段为空时，使用jQuery来阻止表单提交

解决方案应该非常简单。 我想在输入框中找不到任何值时阻止表单正确提交。 这是我的JSFiddle： http ： //jsfiddle.net/nArYa/7/

//标记

  <input type="text" placeholder="Your name*" autocomplete=off name="name" id="user_name" Sign Up  

// jQuery的

 if ($.trim($("#email, #user_name").val()) === "") { $('#form').submit(function(e) { e.preventDefault(); alert('you did not fill out one of the fields'); }) } 

正如您在JSFiddle中看到的那样，问题是当我在两个字段中输入内容时，会弹出警告框STILL。 我很难搞清楚原因。 在我的if（$ .trim（$“＃email，＃user_name”）。val（））===“”）中是否有问题？

Answer 1

两件事，＃1检查空字段应该在每次提交尝试时发生，＃2你需要单独检查每个字段

 $('#form').submit(function() { if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val()) === "") { alert('you did not fill out one of the fields'); return false; } }); 

更新小提琴

Answer 2

您的检查在页面加载时发生。 提交表单时需要检查字段。

 $('#form').submit(function(e) { if ($.trim($("#email, #user_name").val()) === "") { e.preventDefault(); alert('you did not fill out one of the fields'); } }); 

Answer 3

我想这会有所帮助：

 $('#form').submit(function(e) { e.preventDefault(); $("#email, #user_name").each(function(){ if($.trim(this.value) == ""){ alert('you did not fill out one of the fields'); } else { // Submit } }) }) 

Answer 4

HTML5：在输入标记中使用必需的

• 布尔属性。

• 在提交表单之前必须填写输入字段。

• 适用于文本，搜索，url，电话，电子邮件，密码，日期选择器，号码，复选框，广播和文件。

w3schools提示

Answer 5

将if语句放在回调中：

 $('#form').submit(function(e) { if ($.trim($("#email").val()) === "" || $.trim($("#user_name").val())) { e.preventDefault(); alert('you did not fill out one of the fields'); //You can return false here as well } });