jQuery form field validation?

Question

I finished all my psets, and was working on trying to implement some javascript in with the PHP forms we built in pset7. It seems that by building the template and the view based upon the CS50 implementation of MVC, you can't use jQuery to modify the form in real time. Either the call to render() or the callback to another page is screwing this up.

For example, with the below script, I can change the border of a field to become red if the user clicks in the field but enters nothing & goes to another field...but only if the form is built on one page (no rendering of a separate header & footer like we did in CS50 Finance).

$('#contact_name').on('input', function() {
var input=$(this);
var is_name=input.val();
if(is_name){input.removeClass("invalid").addClass("valid");}
else{input.removeClass("valid").addClass("invalid");}
});

It is saved in a scripts.js file which I tried referencing in the header, body, and footer.

Answer 1

I struggled with this for several hours per day for over a week, but I figured it out. First problem was a bad path to the scripts.js file. Then I found if I added the script tags as the first lines of the body template that is rendered (not in the header.php or footer.php templates) the script will run. Amazing how simple stuff can be overlooked sometimes.