Self-practice (HTML Form Validation with Javascript)

Get Help JavaScript
,
#1

Hey guys,

I’m working on a self-practice using Javascript to perform Form Validation. Unfortunately I can’t seem to get my form to produce an output into the text area I have designated (which is indicated by the id=“outputs”).

I’m not sure if it is the document.getElementsbyId.value that is the issue here…

Javascript

			function formValidation()
			{
				var name = document.formfields.name;
				var age = document.formfields.age;
				var gender = document.getElementsByName("gender")
				
				if(nameValidation(name))
				{
					if(ageValidation(age))
					{
						if(genderValidation(gender))
						{
							document.outputs.value = document.getElementsbyId("formfields").value
						}
					}
				}
					return false;
			}
			
			function nameValidation(n)
			{
				var nLen = n.value.length;
				if(nLen == 0 || nLen > 15)
				{
					document.getElementsbyId("errors").value='Please ensure that the name field is filled in, with no more than 15 characters.'
					return false;
				}
				else 
				{return true;}
			}
				
			function ageValidation(a)
			{var numbers = /^[0-9]+$/;
			if(a.value.match(numbers) && a.value > 0 )
			{return true;}
			else
			{
			document.getElementById("errors").value = 'Please ensure that your age is in numbers and is not a negative figure.';
			return false;
			}
			}
			
			function genderValidation()
			{
			if(gender[0].checked == true || gender[1].checked == true)
			{return true;}
			else
			{
			document.getElementById("errors").value = 'Please ensure that you have selected either Male or Female as your gender.';
			return false;
			}
			}

HTML

        <table>
            <form id="formfields"> 
                <tr>
                    <td>Name: </td><td><input type = "text" name = "name" id = "name"></td>
                </tr>
                <tr>
                    <td>Age: </td><td><input type = "number" name = "age" id = "age"></td>
                </tr>
                <tr>
                    <td>Gender: </td>
                    <td>
                        <input type = "radio" name = "gender" id = "male" value = "male">
                        <label for = "male">Male</label>
                        <input type = "radio" name = "gender" id = "female" value = "female">
                        <label for = "female">Female</label>
                    </td>
                </tr>
                <tr>
                    <td>Phone: </td><td><input type = "text" name = "phone" id = "phone"></td>
                </tr>
                <tr>
                    <td>Hobbies: </td>
                    <td>
                        <input type = "checkbox" name = "hobbies" id = "reading" value = "reading">
                        <label for = "reading">Reading</label>
                        <input type = "checkbox" name = "hobbies" id = "sports" value = "sports">
                        <label for = "reading">Sports</label>
                        <input type = "checkbox" name = "hobbies" id = "movie" value = "movie">
                        <label for = "reading">Movie</label>
                        <input type = "checkbox" name = "hobbies" id = "traveling" value = "traveling">
                        <label for = "reading">Traveling</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" value="Submit" onclick="formValidation()">
                    </td>
                </tr>
			</form>
            <tr>
                <td>Output: </td>
                <td><textarea id="outputs" name="outputs" rows=8 column=40></textarea></td>
            </tr>
            <tr>
                <td>Errors: </td>
                <td><textarea id="errors" name="errors" rows=4 column=40></textarea></td>
            </tr>
        </table>
#2

I would first check to verify that your inputs are being passed correctly by using console.log with your variables.

If they are, you can always create a text node and have outputs append them.

let text = document.createTextNode(desiredText);
let output = document.getElementById("outputs");
output.appendChild(text);

Now, since you may need to do this a couple of times, you can potentially create extra tags every time you need or whatever styling/formatting. You can create those nodes with javascript as you need.