html - jQuery Mobile 表单验证和 html 5

Question

我是整个 jQuery Mobile 和 HTML5 领域的新手（请耐心等待），我是第一次验证表单。现在我真的很想使用 html 5 验证表单，其中会弹出以下内容：

现在我决定给它一个 bash 并具有以下代码：

<form>
     <input required type="text" name="searchtitle" id="searchtitle" placeholder="Enter the textbook's title">
     <input type="submit" id ="searchsubmit" name="searchsubmit" value="Search">
 </form>

现在，当单击上面的“搜索”按钮时，我有以下代码：

$(document).on('pageinit',"#searchpage",
function()
{
   $("#searchsubmit").click(
   function(e)
   {
   //Do a lot of processing here
   window.location.href ="#results";
   }  
 }); 

现在我注意到为什么当我单击搜索按钮时单击事件会运行并且由于表单验证而没有停止，如果我完全错了，有人可以指出我正确的方向，这将教我如何使用表单验证HTML5

Answer 1

您提到的那些 HTML5“弹出窗口”是由浏览器本身实现的。

我不认为对他们有很大的支持。特别是在移动浏览器上，您通常会在其中运行 jQuery Mobile 应用程序。

如果我是你，我现在会使用 jQuery Validate 之类的东西来处理表单验证。

http://jqueryvalidation.org

Answer 2

它没有停止的原因是因为input type="submit"默认情况下会提交，所以它正在重新加载页面。您需要将以下行添加到您的代码中：

$(document).on('pageinit',"#searchpage",
function()
{
   $("#searchsubmit").click(
   function(e)
   {
   e.preventDefault(); // add this line to prevent the form from submitting regardless.
   //Do a lot of processing here
   window.location.href ="#results";
   }  
 });