Help with validation

Question

https://code.sololearn.com/WTr7iJ66JhCE/#html
I have this code, it doesn't run well on the code playground here but I can't quite get the validation of the code to work. The form is supposed to display light green in the field if it works and orange if it doesn't but I'm having trouble figuring out how to properly check if the values in the fields are what I want.
Thank you in advance for help!

Answer 1

I changed these two if statements:

// check if myForm.screenName is empty, if so display orange
if ( myForm.screenName == null) {
myForm.screenName.style.backgroundColor = "Orange";
}
else{
myForm.screenName.style.backgroundColor = "LightGreen";
}

// check if .zip has 5 numbers or not
if ( myForm.zip.value.length != 5 ) {
myForm.zip.style.backgroundColor = "Orange";
}
else{
myForm.zip.style.backgroundColor = "LightGreen";
}

//All you needed to do was add an "else" part and better conditions to test your if statements

//You have a lot to learn, your code really needs some work. I suggest you keep on practicing and try to solve your problems on your own first.

Answer 2

First of all, why did you specify the parameter "event" in your function validateForm(event) when you're never passing any arguments through it?

Second, you made some syntax errors like specifying yes without quotes "yes". Your strings should always be encased within quotes.

Third, when you declare variables and assign an element to it then you either define them in a user-defined function or a window.onload function else that code won't load.

Here is an example of a window.onload function which I recommend you enclose your entire JS in on each of your codes:

window.onload = function (){
var btn = document .getElementById("validate");
btn.addEventListener("click", function (){
validateForm();
});
}

//Adding this to your JS instead of that last few lines that you tried, will do the same as the previous fix I posted here.

Answer 3

These are the changes I made to your HTML and Javascript to make it work:

(HTML):

<input type="button" id="validate" value="Validate Form" onclick="validateForm()">

(Javascript):

function validateForm() {
var myForm = document.querySelector("#myForm");

myForm.screenName.style.backgroundColor = "LightGreen";
myForm.zip.style.backgroundColor = "LightGreen";
myForm.tos.style.backgroundColor = "LightGreen";

// check if myForm.screenName is empty, if so display orange
if ( myForm.screenName ) {
myForm.screenName.style.backgroundColor = "Orange";
}

// check if .zip has 5 numbers or not
if ( myForm.zip != 5 ) {
myForm.zip.style.backgroundColor = "Orange";
}

// check to see if .tos contains yes or not
if ( myForm.tos == "yes") {
myForm.tos.style.backgroundColor = "LightGreen";
}
}

/*var myForm = document.querySelector("#myForm");
myForm.validate.addEventListener("click", validateForm);*/

//I'll recheck my analysis for a constructive criticism response and will get back to you with that response.

Answer 4

Thanks for the help, one last question. now when I run the program it is making the fields orange even when I put in the correct values, how can I make it so when I enter the right stuff in the fields it stays green?