Javascript 正在检查导致onsubmit错误的元素的值_Javascript_Php_Jquery

Javascript 正在检查导致onsubmit错误的元素的值

javascript php jquery

Javascript 正在检查导致onsubmit错误的元素的值,javascript,php,jquery,Javascript,Php,Jquery,我有一个表单，我试图在页面提交之前检查元素的颜色。我正在尝试使用由调用的函数验证表单，该函数来自使用“onsubmit=”。如果我在下面的代码中添加“document.getElementById（name）.style.backgroundColor”，当我提交页面时，它将直接转到下一页，而不会询问我是否要转到下一页，也不会让用户知道表单有错误。看起来表单成功地调用了validate（）和check_form（）函数，但是通过背景色检查，它似乎没有完成validate（）函数。我测试了它，没有

我有一个表单，我试图在页面提交之前检查元素的颜色。我正在尝试使用由调用的函数验证表单，该函数来自使用“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>

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

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


; 
sample=document.getElementById（sample）；
//如果选中复选框，请确保所有必填字段都存在
$（“#”+复选框名称）。更改（函数（）{
if（document.getElementById（checkbox\u name）.checked）{
sample.style.backgroundColor=“红色”；
}
});
});
函数验证（来自）{
var valid='true'；
如果（检查表单（）='false'）{
valid='false'；
}
如果（有效=='false'）{
警报（'错误：某些输入无效。请检查字段'）；
返回false；
}
否则{
返回确认（'您确定要提交吗？'）；
}
}
函数检查表（）{
sample=document.getElementById（sample）；
console.log（sample.style.backgroundColor）
如果（sample.style.backgroundColor=='red'）{
返回“false”；
}否则{
返回“true”；
}
}

从另一个页面引入示例以动态创建表单

sample

是dom就绪处理程序中的一个局部变量，在check form方法中不可访问，但由于

sample

是一个元素的id，可以作为窗口属性（全局变量）使用，因此会出现类似

uncaughttypeerror:无法读取null的属性“style”这样的错误
相反，在check\u form
方法中将id作为字符串文本传递，如
function check_form() {
    var sample = document.getElementById('sample');
    console.log(sample.style.backgroundColor)
    if (sample.style.backgroundColor == 'red') {
        return 'false';
    } else {
        return 'true';
    }
}

演示：在id名称文档中使用引号。getElementById（'sample'）；嗨，谢谢！在我的实际代码中，我将id sample作为变量，但这不起作用。我已经修改了上面的代码，以便更准确地显示表单的功能。我无法使其正常工作。@bio_sprite能否编辑小提琴以重新创建表单。。。我在这里做了更改：但我不确定您是否可以在JSFIDLE中使用php。我还更新了上面的代码。抱歉，我没有更新您发送的版本3 fiddle，因为它对我来说更高级一些。@bio_sprite不要把PHP代码放在。。。。而是使用查看源选项从浏览器获取生成的html为什么输入名称是动态的。。。。表单中是否还会有多个输入
function check_form() {
    var sample = document.getElementById('sample');
    console.log(sample.style.backgroundColor)
    if (sample.style.backgroundColor == 'red') {
        return 'false';
    } else {
        return 'true';
    }
}