Question

我不知道如何在页面内进行自我验证。

我有一个php文件包含一个复选框和很多文本框。我想做的是，用户将在复选框上检查的内容将要求填写文本框。我尝试在php中使用我的语句进行验证，但它总是在它验证所有内容之前重定向到另一个页面，我想要的是当用户单击提交按钮时，它将触发整个页面并验证应该填充的那些页面。 / p>

用户将选中任意一个复选框
然后它有一个相应的条件，将使文本框需要填写！

希望你们能帮助我。我不知道该怎么做。 javascript还是其他什么？我需要解决方案，请告诉我。

代码是这样的：

Test 1 <input name="chkbox[]" type="checkbox" value="1"><br>
Test 2 <input name="chkbox[]" type="checkbox" value="2"><br>
Test 3 <input name="chkbox[]" type="checkbox" value="3"><br>
Test 4 <input name="chkbox[]" type="checkbox" value="4"><br>
Test 5 <input name="chkbox[]" type="checkbox" value="5"><br>

<br><br>

Name <input name="txt1" type="text"><br>
Address <input name="txt2" type="text"><br>
Number <input name="txt3" type="text"><br>
Age <input name="txt4" type="text"><br>

Answer 1

这两个选项（全部在javascript中）。第一个，根据要求验证用户何时尝试提交。

document.addEventListener("DOMContentLoaded", function (event) {
    var isValid = false;
    document.querySelector("#formid").addEventListener("submit", function(e){
        var _selector = document.querySelectorAll('input[type=checkbox]:checked');
        var checked = _selector.length;
        for(var i = 0; i<checked; i++){
            if (_selector[i].checked) {
                if(!document.querySelector('input[name=txt'+ _selector[i].value +']').value)
                    break;
            }
        }
        if(checked == i)
            isValid = true;

        if(!isValid){
            alert('at least one field is empty');
            e.preventDefault();    //stop form from submitting
        }
    });
});

第二个使用eventlistener来添加和删除必填字段。

document.addEventListener("DOMContentLoaded", function (event) {
    var _selector = document.querySelectorAll('input[type=checkbox]');
    for(var i = 0; i<_selector.length; i++){
        _selector[i].addEventListener('change', function (event) {
            if (event.target.checked) {
                document.querySelector('input[name=txt'+ event.target.value +']').required = true;
            } else {
                document.querySelector('input[name=txt'+ event.target.value +']').required = false;
            }
        });
    }
});

然后，您可以设置必填字段的样式以显示需要填写的内容：

:required{border: red solid 1px;}

需要有关Php或Javascript验证的帮助

1 个答案: