need help about Php or Javascript Validation

Question

I dont know how to do a self validation within the page.

I have a php file contains a checkbox and a lot of textboxes. What i would like to do is that, what the user will check on the checkbox will require the textboxes to be filled up. I tried to validate using my statement in php but it always redirect to another page before it validates everything, what i want is that when the user click the submit button, it will trigger the whole page and validate those that should be filled up.

1. user will check any of the checkbox
2. then it has a corresponding condition that will make the textboxes required to be filled in!

Hope you guys can help me. I dont know how to do it. javascript or anything? I need solution and show me please.

Codes are like this:

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

Two options for this (all in javascript). The first, as requested is validating when the user tries to submit.

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
        }
    });
});

the second uses an eventlistener to add and remove the required field.

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;
            }
        });
    }
});

Then you can style the required fields to show which needs to be filled:

:required{border: red solid 1px;}