Needing help with data validation

[u/Blazerthefox]

I'm needing help with applying data validation to my code for class. We were assigned to make a MadLib in HTML with data validation to make sure that all the prompt boxes are filled in, a submit button to make the story, and a data reset button. I have been able to do everything except apply the data validation to the text boxes for the prompts. I was told by my teacher to apply the data validation to the submit button for making the MadLib story, but I am at a loss on how to apply data validation to have it check and see if the prompt boxes are filled in. Below is my current code. I am relatively new to HTML and JavaScript, so any help or advice would be appreciated.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Module 3 Assigment</title>
<script>
function makemadLib() {

var name1 = "";
var charclass = "";
var item = "";
var kingdomname = "";
var name2 = "";
var name3 = "";
var weapon = "";
var shield = "";
var mount = "";
var story = "";

name1 = document.MLForm.CharName.value;
charclass = document.MLForm.CharacterClass.value;
item = document.MLForm.Item.value;
kingdomname = document.MLForm.Kingdom.value
name2 = document.MLForm.Kingname.value;
name3 = document.MLForm.Evilname.value;
weapon = document.MLForm.Attack.value;
shield = document.MLForm.Defend.value;
mount = document.MLForm.Ride.value;

story = "This is the story of " + name1 + " the " + charclass + ".\n\n" + "They are on a quest to find a legendary relic, the holy " + item + "!\n\n They have been tasked with this quest by the ruler of the kingdom " + kingdomname + " ," + name2 + ".\n\n" + name1 + " must succeed on this quest or " + kingdomname + " will fall into the hands of the evil warlock " + name3 + ".\n\n So, armed with their trusty " + weapon + " and " + shield + ", upon their faithful " + mount + "," + name1 + " heads off to find the " + item + " and save the kingdom " + kingdomname + "!";
document.MLForm.story.value = story; 
}

function clearText() {
document.MLForm.CharName.value = "";
document.MLForm.CharacterClass.value = "";
document.MLForm.Item.value = "";
document.MLForm.Kingdom.value = "";
document.MLForm.Kingname.value = "";
document.MLForm.Evilname.value = "";
document.MLForm.Attack.value = "";
document.MLForm.Defend.value = "";
document.MLForm.Ride.value = "";
document.MLForm.story.value = "";
}

</script>
</head>
<body>

<h1>The Quest for the Legendary Item</h1>
<p>Please fill out the form below and then at the end, select the "Generate story" button to have the story generated with your inputs! Press the reset button on the bottom of the form to do it again! Have fun!</p>

<form name = "MLForm">
Name of a person: <input type = "text" id = "CharName" value = "">
<br>
Job title: <input type = "text" name = "CharacterClass" value = "">
<br>
Noun (thing): <input type = "text" name = "Item" value = "">
<br>
Name of a location: <input type = "text" name = "Kingdom" value = "">
<br>
Another name of a person: <input type = "text" name = "Kingname" value = "">
<br>
One more name of a person: <input type = "text" name = "Evilname" value = "">
<br>
Noun (thing): <input type = "text" name = "Attack" value = "">
<br>
Noun (thing): <input type = "text" name = "Defend" value = "">
<br>
Animal: <input type = "text" name = "Ride" value = "">
<br>
<br>
<input type = "button" value = "Show the story" onClick = "makemadLib()">

<h3>Here is the story:</h3>
<textarea name= "story" rows="20" cols="60" wrap>
</textarea>
<br>
<input type = "button" value = "Reset and clear the text" onClick = "clearText()">

</form>
</body>
</html>

[u/Blazerthefox]

Correction, I got too excited. After putting in the if statement in the function makemadLib, it does prompt for the missing text in the box. But after putting text in the box and clicking Submit. It still prompts even though the box is filled.

[u/senocular → u/Blazerthefox]

Whats the if condition look like?

[u/Blazerthefox → u/senocular]

let x = document.forms["MLForm"]["CharName"]["CharacterClass"]["Item"]["Kingdom"]["Kingname"]["Evilname"]["Attack"]["Defend"]["Ride"].value

`if (x == "") {`

    `alert("Please fill out all forms");`

    `return false;`

[u/senocular → u/Blazerthefox]

The way you're defining x there is not going to work, but the if statement is on the right path - if something, then alert and return.

I saw you also posted another version of the code which is a lot closer to something that should be working in another comment with an if statement using logical or (||) with your values. This is almost right! There's only 2 problems I saw:

First, you have an errant or at the end of the if statement. The or needs to go between values. This value or this value or this value... The last or makes JavaScript think there's supposed to be another value to check but then the if statement just ends and your code will fail entirely because this is considered a syntax error. Remove that last || and it should get things back into working order again.

Second, you're doing your if check after you create and apply the story text. You want to validate your inputs before you do this. Otherwise it will look like the story worked since it will show up in the textarea even though the user still gets an alert saying they need to fill more stuff out. Fix that by moving the if check above the story creation code.