如何防止基于html元素中的文本提交表单？

Question

我有一个表单，我有用户ID可用性检查。因此，如果Id已经在DB中，它将显示消息“Id已在使用中”。在这种情况下，我必须避免提交表格。为此我的html如下，

<div>
<label><strong>Teacher Id:</strong></label>
<input type="text" name="teacherId" id="teacherId" placeholder="Enter Teacher Id"  > 
</div><span class="status" id="status"></span>

此处的span将包含有关可用性的文字，

要跨越的值来自jquery post call，

$.post('<%=request.getContextPath()%>/controller/TeacherIdCheckController',
{'teacherId':teacherId},
 function(data)
 {
$('.status').html(data);
  });
}

这个工作正常，以防止提交我写的javascript函数，

function checkTeacherId(){
 alert(" in checkTecherId()");
 var status=$("#status").text();
 alert(status);
 if(status=="Id in use try another")
preventDefault();
 else
return true;

}

一切正常，但是这个javascript函数运行不正常，所以我无法阻止在DB中已存在Id的情况下提交。所以请任何人帮助我。

Answer 1

只是因为你需要在函数的arg中传递事件：

function checkTeacherId(e){ // <---pass the event here
  .....
 if(status=="Id in use try another")
   e.preventDefault(); // and stop it here using dot notation
 else
   return true;
}

根据您的评论，您可以将事件传递给onclick处理程序中的函数：

onclick="checkTeacherId(event);"

---

Fiddle

---

好！正如@Sanjeev尝试为这项工作评论最佳方法然后当您使用jQuery时，您可以按照 Unobrusive Javascript 等最佳方法执行此操作（删除此内联脚本就像上面发布的那样）：

function checkTeacherId(e){ // <---pass the event here
  .....
 if(status=="Id in use try another")
   e.preventDefault(); // and stop it here using dot notation
 else
   return true;
}


$(function(){
   $('#yourformid').on('submit', function(e){
      checkTeacherId(e);
   });
});

---

如果要将脚本外部化为在全局范围内声明函数并使用submit事件将事件处理程序放入doc，请使用此方法。

---

Updated fiddle with unobtrusive way.

Answer 2

根据表单验证的最佳实践解决方案：

您已通过“提交”按钮实现了表单提交，而不是通过像document.getElementById（＆＃34; myForm＆＃34;）这样的js实现.resent（）;

我没有看到在提交按钮上使用onclick处理程序进行验证有任何意义，使用本机onsubmit事件属性，否则你将继续打破提交流程。 onsubmit用于验证表单并在验证失败时停止表单提交。 这将在所有浏览器中正确运行，并且是表单验证的正确方法

示例：

<form action="demo_form.asp" onsubmit="return checkTeacherId()">


function checkTeacherId(){
 var status=$("#status").text();

 if(status==="Id in use try another"){
    return false
 }
 else{
 return true;
 }

}