Javascript Form Validation - jsFiddle Error
Question
I am attempting to display a hidden error list onsubmit if any inputs are blank. I keep getting an error in jsFiddle stating "Shell form does not validate." I checked my syntax and it looks okay (I am new so, I may be missing something).
Any help is appreciated!
https://jsfiddle.net/2mpg7mbj/
HTML:
<html>
<body>
<div id="errors">
<p>The following field(s) must be filled out:</p>
<ul id="errorList">
</ul>
</div>
<form method="POST" onsubmit="validateForm()">
<label for="A">Name</label>
<input id="A" name="A" type="text">
<br><br>
<label for="B">Age</label>
<input id="B" name="B" type="text">
<br><br>
<label for="C">City</label>
<input id="C" name="C" type="text">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
CSS:
#errors {
display:none;
}
Javascript:
function validateForm()
{
var errorMsg = '';
var errorDisplay = document.getElementByID('errors').style;
var errorList = document.getElementByID('errorList');
var name = document.getElementByID('A').value;
var age = document.getElementByID('B').value;
var city = document.getElementByID('C').value;
if (name === '') {
errorMsg += '<li>Name</li>';
};
if (age === '') {
errorMsg += '<li>Age</li>';
};
if (city === '') {
errorMsg += '<li>City</li>';
};
if (errorMsg.length != '') {
errorList.innerHTML = errorMsg;
errorDisplay.display = 'block';
return false;
};
return true;
};
3 answers
solution1
1 ACCPTED 2016-04-30 13:51:23
Change your form to
<form method="POST" action='/endpoint' onsubmit="validateForm(event)">
<label for="A">Name</label>
...
and then in the script you need to change document.getElementByID(...) to document.getElementById(...) ("Id" instead of "ID") and preventDefault() on the event that is passed in to stop the default form submission process.
function validateForm(event) {
...
if(errorMsg.length){
...
event.preventDefault();
}
...
solution2
1 2016-04-30 13:51:40
Some syntax issues:
Remove ; after your all if blocks:
if (age === '') {
errorMsg += '<li>Age</li>';
}
errorMsg.length returns a number, not string.
if (errorMsg.length !== 0) {
errorList.innerHTML = errorMsg;
errorDisplay.display = 'block';
return false;
}
Change document.getElementBy ID () to document.getElementById()
solution3
0 2016-04-30 15:04:39
You have not added jquery in fiddle so have added basic jQuery. Hope I have done exactly as you want.
function validateForm() { var errorMsg = '' var errorDisplay = $("#errors"); var errorList = $("#errorList"); errorList.find("li").remove(); var name = $("#A").val(); var age = $("#B").val(); var city = $("#C").val(); if (!name) { errorMsg += '<li>Name</li>'; } if (!age) { errorMsg += '<li>Age</li>'; } if (!city) { errorMsg += '<li>City</li>'; } if (errorMsg.length > 0) { errorList.append(errorMsg); errorDisplay.css("display","block"); return false; } else { return true; } }
#errors { display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <body> <div id="errors"> <p>The following field(s) must be filled out:</p> <ul id="errorList"> </ul> </div> <form method="POST" onsubmit="return validateForm()"> <label for="A">Name</label> <input id="A" name="A" type="text"> <br><br> <label for="B">Age</label> <input id="B" name="B" type="text"> <br><br> <label for="C">City</label> <input id="C" name="C" type="text"> <br><br> <input type="submit" value="Submit"> </form> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.