Javascript Validation 不起作用 (onSubmit）

Javascript Validation not working (onSubmit)

本文关键字：onSubmit 不起作用 Validation Javascript      更新时间：2023-09-26

提交时调用的Vaidation函数。

.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";  
}

}

表单仍会提交。可能出现的问题？

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

e.preventDefault();

将其放在验证函数上方。

然后在表单上使用 submit（） 函数实际提交表单，前提是您的验证通过。

无论如何，您的表格正在提交。

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

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