javascript - 我应该验证我的表格两次吗？

Question

我的代码完美运行 here .
但问题是我想添加一些代码验证，以便如果代码中有问题则无法提交表单。这是我添加的代码:

Jquery 代码:

 var user = document.getElementById('u');
var email = document.getElementById('em');
var pass1 = document.getElementById('p1');
var pass2 = document.getElementById('pa2');
function isEmpty(input) {
  if (input.value == "" || input.value == null) {
    return true;
  } else {
    return false;
  }
}

function validateform() {
  if(isEmpty(user) || isEmpty(email) || isEmpty(pass1) || isEmpty(pass2))
  {
    alert("All fields are required.");
    $("#form").submit(function(event) {
      event.preventDefault();
    });

    if(isEmpty(user))
    {  
      user.focus();
    }
    else if(isEmpty(email))
    {  
      email.focus();
    }
    else if(isEmpty(pass1))
    {  
      pass1.focus();
    }
    else if(isEmpty(pass2))
    {  
      pass2.focus();
    }
  }
}

我还在表单中添加了一个 ID:

<form action="m.php" method="post" id="form">

我还在此处添加了 onsubmit:

<input name="submit" type='submit' value='Submit' onsubmit="validateform()">  

但它不起作用，即使所有字段都是空的，页面也会移动到m.php。我应该怎么办？我应该安装jquery验证插件并验证两次吗？

编辑
这是Demo

Answer 1

检查字段是否为空后，如果返回 false;，则 from 将不会提交。
提交表格example .

JavaScript

function validateform() {
    if(isEmpty(user))
    {  
        user.focus();
        return false;
    }
    else if(isEmpty(email))
    {  
        email.focus();
        return false;
    }
    else if(isEmpty(pass1))
    {  
        pass1.focus();
        return false;
    }
    else if(isEmpty(pass2))
    {  
        pass2.focus();
        return false;
    }
}

您的 onsubmit 需要位于表单上，而不是按钮上。
HTML

<form action="m.php" method="post" id="form" onsubmit="validateform()">
<input name="submit" type='submit' value='Submit' >