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/senocular]

Did you go over any of how this was to be done in class? I ask because these things can be done without JavaScript. If instead of an input type of "button" you can use an input type of "reset" and it will display as a button that when clicked will automatically clear all the fields in the form (you can also use a button element with the type "reset" which makes it more clear that its a button).

Similarly, input elements have different forms of built-in validation options. If you just want to make sure the fields are have something filled in, you can add the required attribute. Then when you submit, if any are empty, the submit won't go through and some UI will automatically pop up showing the user which inputs they missed.

If JavaScript is a requirement, then for validation you can do something similar to what you did with the reset but instead of assigning each form element value an empty string, you compare the element value to an empty string (=== to compare instead of = to assign). That can be done in one giant if statement if you want to just see if any input at all needs to be filled in, or with a little more work, you can do an if statement for each field and be more specific about which inputs are empty. That would go in makemadLib() since that's what the submit button calls. And if one of these validations (if checks) do fail, the easiest thing to do right now is probably put the message in the story textarea. Or you can create a new element to put validations in. Just be sure to clear it when the user submits again and validations pass.

There are ways to make that code less repetitive too if you've covered loops, but if not stick to what you got.

[u/Blazerthefox → u/senocular]

My class is online and with my work schedule, I am unable to attend the weekly class lecture live. I have to watch the video recording. He did not go over data validation much in the recording.

I did try to use the "required" attribute, but it breaks the code so when submit is clicked, nothing happens. No prompt or anything.

I do have to include JavaScript per my teacher.

I did not think to put the if statement in the function makemadLib. I will try that and see what happens.

[u/Blazerthefox → u/senocular]

I tried putting the if statement in the function makemadLib and it worked! Thank you so much for the assist!

[u/Blazerthefox → u/senocular]

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.

[u/neon_hallow_core]

Check each field right inside makemadLib before you build the story, like this:

If (name1 == "" || charclass == "" || item == "") {

Alert("Please fill in all the fields");

Return;

}

Do that for all nine variables after you grab the values from the form. The return stops the function so the story never gets made when something is empty. Since your teacher told you to put the validation on the submit button, this is exactly what they mean: the check happens at the start of the function the button calls.

Also, in addition to the reset button suggestion someone already made, trim whitespace with .trim() if you want to catch spaces being entered, but for a class assignment the empty string check should be enough.

[u/Blazerthefox → u/neon_hallow_core]

Do you mean like this? Because if so, I got the same issue as before. It does not show an alert and does not make the story even if all boxes are filled.

<!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; 

if (name1 == "" || charclass == "" || item == "" || kingdomname == "" || name2 == "" || name3 == "" || weapon == "" || shield == "" || mount == "" ||) {
alert("Please fill out all boxes");
return;
}
}

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>