JavaScript验证不起作用（onSubmit）

Question

提交时调用的验证功能。

的HTML

 <input type="submit" class="submit"  value="submit">

JS

window.load = function() {
var form = document.getElementById('form');
  form.onsubmit = function(e) {
      return validate(); // will be false if the form is invalid
  }  
}

验证（）

function validate() {

    var x = document.forms["form"]["fname"].value;
    var y = document.forms["form"]["pname"].value;
    var email = document.forms["form"]["email"].value;
    var phone = document.forms["form"]["phone"].value;
    var date = document.forms["form"]["date"].value;
    var month = document.forms["form"]["month"].value;
    var year = document.forms["form"]["year"].value;
    return false;
    alert('wass');



    if (x==null || x == "" || isNaN(x) == false) {
        alert("Check Name, It can't have numbers. You can use Roman numbers.");
        return false;}
    else if (y == null || y == "") {
        alert("Picture Name must be filled out");
        return false;       
    }
    else if(email == '' || email.indexOf('@') == -1 || email.indexOf('.') == -1) 
    {
        alert("Insert valid Email Address");
        return false;   
        }
    else if(phone == ''|| phone <1000000000 || phone >9999999999){

        alert("Enter valid phone number");
        return false;   

        }else if(date =='' || date<01 || date >31){

        alert("Enter valid Date ");
        return false;   

        }else if(month =='' || month<1 || month >12){

        alert("Enter valid Month ");
        return false;   

        }else if(year =='' || year<1800 || year >2016){
        alert("Enter valid Year ");
        return false;   

        }



//Function used to make colors red instead of individual codelines
function makeRed(inputDiv){
inputDiv.style.backgroundColor="#AA0000";
//inputDiv.parentNode.style.backgroundColor="#AA0000";
//inputDiv.parentNode.style.color="#FFFFFF";
}

//Function made to clean the divs when the validation is met.
function makeClean(inputDiv){
inputDiv.style.backgroundColor="#FFFFFF";
inputDiv.parentNode.style.backgroundColor="#FFFFFF";
inputDiv.parentNode.style.color="#000000";  
}



}

表单仍被提交。 可能的问题？

Answer 1

您需要使用以下方法阻止默认表单提交：

e.preventDefault();

将其放在您的验证功能上方。

然后，在您的验证通过的情况下，使用表单上的commit（）函数实际提交表单。

无论何时，您的表单都将提交。

Answer 2

您需要通过调用e.preventDefault()来阻止表单提交的默认功能。 在您的情况下：

window.load = function () {
    document.getElementById('form').onsubmit = function (e) {
        if (!validate()) {
            e.preventDefault();
        }
    }
}