Javascript验证无效(onSubmit)

时间:2016-02-27 08:59:54

标签: javascript html forms

要求提交的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";  
}



}

表单仍然提交。可能的问题?

2 个答案:

答案 0 :(得分:0)

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

e.preventDefault();

将其放在验证功能上方。

然后使用表单上的submit()函数在验证通过后实际提交表单。

在您的表单提交时,无论如何。

答案 1 :(得分:0)

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

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