Question

我有一个表单，我试图在页面提交之前检查元素的颜色。我正在尝试使用from使用'onsubmit ='调用的函数来验证表单。如果我在下面的代码中添加'document.getElementById（name）.style.backgroundColor'，当我提交页面时，它将直接进入下一页，而不会询问我是否要进入下一页或让用户知道表单有错误。看起来表单成功调用了validate（）和check_form（）函数，但是使用背景颜色检查它似乎没有完成validate（）函数。我已经在没有'style.backgroundColor'的情况下进行了测试，它运行正常（通知用户）。我做错了什么？

由于

所用代码的简化示例：

<!DOCTYPE html>
<html>
<body>
<form class="bulk" onsubmit="return validate(this)" action="next_page.php" method="GET">
<input type="checkbox" id="checkbox" name ="checkbox">
<input type="text" id="sample" name="sample" value="">      
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var checkbox_name = 'checkbox';         
        var sample = 'sample';
        sample = document.getElementById(sample);

        //if checkbox is checked, make sure all the required fields are there
        $("#"+checkbox_name).change(function(){     
            if(document.getElementById(checkbox_name).checked){ 
                sample.style.backgroundColor = "red";
            }
        });
    });

    function validate(from) {

        var valid = 'true';
        if(check_form() == 'false'){
            valid = 'false';    
        }
        if(valid == 'false'){
            alert('ERROR: Some inputs are invalid. Please check fields');
            return false;
        }
        else{
            return confirm('Are you sure you want to submit?');
        }
    }

    function check_form(){
        sample = document.getElementById(sample);
        if(sample.style.backgroundColor == 'red'){
            return 'false';
        }
        else{
            return 'true';
        }   
    }

    </script>
    <input type='submit' id="sub"  name ="submit" value='Update Samples' />
    </form>

运行的check_form函数的测试示例：

function check_form(){
        sample = document.getElementById(sample);
        return 'false'; 
}

编辑：我现在设置表单的方式更准确地显示为：

<!DOCTYPE html>
<html>
<body>
<?php $sample = 'test'; ?>
<form class="bulk" onsubmit="return validate(this)" action="next_page.php" method="GET">
<input type="checkbox" id="checkbox" name ="checkbox">
<input type="text" id="<?php echo $sample;?>" name="<?php echo $sample;?>" value="">        
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        var checkbox_name = 'checkbox';     
        sample = <?php echo json_encode("$sample"); ?>; 
        sample = document.getElementById(sample);

        //if checkbox is checked, make sure all the required fields are there
        $("#"+checkbox_name).change(function(){     
            if(document.getElementById(checkbox_name).checked){ 
                sample.style.backgroundColor = "red";
            }
        });
    });

    function validate(from) {

        var valid = 'true';
        if(check_form() == 'false'){
            valid = 'false';    
        }
        if(valid == 'false'){
            alert('ERROR: Some inputs are invalid. Please check fields');
            return false;
        }
        else{
            return confirm('Are you sure you want to submit?');
        }
    }

    function check_form(){
        sample = document.getElementById(sample);
        console.log(sample.style.backgroundColor)
        if (sample.style.backgroundColor == 'red') {
            return 'false';
        } else {
            return 'true';
        }
    }

    </script>
    <input type='submit' id="sub"  name ="submit" value='Update Samples' />
    </form>

从其他页面引入样本以动态创建表单。

Answer 1

sample是dom ready处理程序中的局部变量，在check表单方法中无法访问，但由于sample是一个可用作窗口属性的元素的id（全局变量），因此您将收到类似Uncaught TypeError: Cannot read property 'style' of null的错误。

而是将id作为字符串文字传递给check_form方法，如

function check_form() {
    var sample = document.getElementById('sample');
    console.log(sample.style.backgroundColor)
    if (sample.style.backgroundColor == 'red') {
        return 'false';
    } else {
        return 'true';
    }
}

演示：Fiddle

检查元素的值，导致onsubmit错误

1 个答案: