Javascript:在表单中输入数据时，提交按钮不处于活动状态

Javascript: submit button is not active when enter data to the form

本文关键字：按钮 提交 活动状态 表单 数据 输入 Javascript      更新时间：2023-10-10

我已经学会了这段代码，但它似乎不起作用。问题是，当我在表单中输入所有数据后尝试点击时，"提交"按钮没有激活。有什么帮助吗？请

<!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>

我复制了代码并尝试了相同的代码。它有效。可能是您填写了所有三个输入，但没有在代码中放入符合EMAIL格式（regex）的正确EMAIL。例如，尝试用这三个输入填充输入某人，某人，someone@gmail.com；提交已启用

相关文章：