Javascript:向表单输入数据时,提交按钮无效

时间:2015-02-12 13:37:09

标签: javascript html

我已经拿起了这段代码但似乎没有用。问题是提交'我输入所有数据到表单后尝试单击时按钮未激活。对我缺乏的地方有任何帮助吗?请

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<form id="ourForm">
    <label>First Name</label><input type="text" /><br />
    <label>Last Name</label><input type="text" /><br />
    <label>Email</label><input type="text" /><br />
    <input type="submit" value="submit" />
</form>
 <script type="text/javascript">

 function addEvent(to, type, fn){
    if(document.addEventListener){
        to.addEventListener(type, fn, false);
    } else if(document.attachEvent){
        to.attachEvent('on'+type, fn);
    } else {
        to['on'+type] = fn;
    }  
};

 var Form = {

    validClass : 'valid',

    fname : {
        minLength : 1,     
        maxLength : 15,
        fieldName : 'First Name'
    },

    lname : {
        minLength : 1,     
        maxLength : 25,
        fieldName : 'Last Name'
    },

    validateLength : function(formEl, type){
        if(formEl.value.length > type.maxLength || formEl.value.length < type.minLength ){   
            formEl.className = formEl.className.replace(' '+Form.validClass, '');
            return false;
        } else {
            if(formEl.className.indexOf(' '+Form.validClass) == -1)
            formEl.className += ' '+Form.validClass;
            return true;
        }
    },

    validateEmail : function(formEl){
        var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
        var emailTest = regEx.test(formEl.value);       
        if (emailTest) {
            if(formEl.className.indexOf(' '+Form.validClass) == -1)        
            formEl.className += ' '+Form.validClass;           
            return true;
        } else {
            formEl.className = formEl.className.replace(' '+Form.validClass, '');
            return false;
        }          
    },     

    getSubmit : function(formID){   
        var inputs = document.getElementById(formID).getElementsByTagName('input');
        for(var i = 0; i < inputs.length; i++){
            if(inputs[i].type == 'submit'){
                return inputs[i];
            }      
        }      
        return false;
    }          

}; 

addEvent(window, 'load', function(){

    var ourForm = document.getElementById('ourForm');  
    var submit_button = Form.getSubmit('ourForm');
    submit_button.disabled = 'disabled';

    function checkForm(){
        var inputs = ourForm.getElementsByTagName('input');
        if(Form.validateLength(inputs[0], Form.fname)){
            if(Form.validateLength(inputs[1], Form.lname)){
                if(Form.validateEmail(inputs[2])){                  

                        submit_button.disabled = false;
                        return true;

                }
            }
        }
        submit_button.disabled = 'disabled';
        return false;
    };

    checkForm();       
    addEvent(ourForm, 'keyup', checkForm);
    addEvent(ourForm, 'submit', checkForm);

});

 </script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

我复制了代码并尝试了相同的代码。有用。可能是您填写了所有三个输入,但是您没有在代码中放置符合EMAIL格式(正则表达式)的正确EMAIL。 例如,尝试使用这三个输入填充输入某人,某人,某人@gmail.com;提交已启用