阻止函数在 JavaScript 中工作？！如何？

Question

到目前为止，我已经开始使用单个 html 页面，使用单个表单 (<form> </form>) 作为显示的内容，因此单击提交按钮将淡出当前表单，然后淡入新表单。这是使用下载的 JavaScript 演示完成的。

但问题是，对于我们的任务，我们需要使用表单验证，因此当电子邮件和密码字段为空时，它会发出警报。因此，当单击提交按钮时，会出现警报窗口，但问题是当它应该保留在当前登录表单上时，表单更改仍然发生？

这是登录表单

<form class="login active" id="logform">
  <h3>Login</h3>
  <div>                         
    <label>Email:</label>                           
    <input id="email3" type="text" />                       
    <span class="error">This is an error</span> 
  </div>

  <div>                     
    <label>
      Password: <a rel="forgot_password" class="forgot linkform">Forgot your password?</a>
    </label>
    <input type="password" id="pass1" />                        
    <span class="error">This is an error</span>
  </div>

  <div class="bottom">                          
    <div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
    <input id="logme" type="submit" onClick="ValidateLog();" rel="emailhome" class="linkform" value="Login"></input>`
    <a rel="register" class="linkform">You don't have an account yet? Register here</a>                   

    <div class="clear"></div>                       
  </div>                    
</form>

这是我试图将其切换到的表单

<form id="homeform" class="emailhome">
  <h3>Welcome to CM Email</h3>
  <div>
  </div>
</form>

*如果验证不正确，我只需要找出一种阻止表单更改的方法吗？我尝试使用删除属性类来阻止函数查找链接表单，但它仍然没有帮助！？ *

function ValidateLog(){
  //EMAIL VALIDATION
  var emailblank = document.forms["logform"]["email3"].value;  
  if (emailblank==null || emailblank=="")
  {
    alert("Error: Please enter your email.");
    return false;
  }

  //PASS VALIDATION
  var passlog = document.forms["logform"]["pass1"].value;
  if (passlog==null || passlog=="")
  {
    alert("Error: Please enter your password.");
    return false;
  }
}

Answer 1

您可以设置表单的onsubmit值：

如果表单不被执行，那么您的验证函数必须返回“false”。一个例子：

function myValidateFunction() {
   if (<email is blank>) {
      return false;

   } else {
      return true;
   }
}

另一种方法是，替换提交按钮：

<button onlick="myValidateFunction()" type="button">Submit</button>

您必须将您的功能更改为：

function myValidateFunction() {
   if (<email is blank>) {
      // do nothing

   } else {
      document.getElementById("myForm").submit()
   }
}

Answer 2

如果您使用 jQuery，因为您才刚刚开始学习，这会让您的事情变得更容易，那么您可以执行以下操作：

<script>
    $('#logform').submit(function(event){
        event.preventDefault(); // will stop redirect

        // now do your validation checks
        if ($('#email3').val() !== '') {
            alert("Error: Please enter your email.");
            return false; 
        } 
        if ($('#pass1').val() !== '') {
            alert("Error: Please enter your password."); 
            return false; 
        }

        // passed validation, do whatever's next...
    });
</script>

jQuery：http://jquery.com/