Jquery代码：

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

如果return 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' >

Answer 2

不需要验证两次。

JS：

function isEmpty(input) {
    return $.trim(input.value) == "";
}

function validateform() {
    var user = document.getElementById('u');
    var email = document.getElementById('em');
    var pass1 = document.getElementById('p1');
    var pass2 = document.getElementById('pa2');

    if(isEmpty(user) || isEmpty(email) || isEmpty(pass1) || isEmpty(pass2))
        alert("All fields are required.");

    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;
    }
    return true;
}

$('form#myForm').submit(function(e){
    e.preventDefault();
    if( validateform() ) //just validate once!
        this.submit(); //and then submit once;
    return false;
});

HTML：

<form action="m.php" method="post" id="myForm">
    .....
    ......Other form settings....
    .....
    <input name="submit" type='submit' value='Submit'>
</form>

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

Jquery代码：

2 个答案: