How wouuld I try to validate a form that has feel in the blanks and has radio buttons through an external javascript file.
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\" />
<title>Form</title>
<style>
form{padding: 15px}
label{display: inline-block; text-align: right; width:60px; padding-right:5px;}
input[type=submit]{margin-top: 20px;}
.error{color: red; margin-left: 10px;}
</style>
</head>
<body>
<form action=\"\" method=\"post\" id =\"aanmelden\">
<div>
<label>Name:</label>
<input type=\"text\" name=\"name\" placeholder=\"Name\">
</div>
<div>
<label>Address:</label>
<input type=\"text\" name=\"address\" placeholder=\"Address\">
</div>
<div>
<label>City:</label>
<input type=\"text\" name=\"city\" placeholder=\"City\">
</div>
<input type=\"submit\" />
</form>
<script>
function removeElementsByClass(className){
elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
function flagError(field, prependText){
var message = prependText + \" cannot be left blank\";
form[field].insertAdjacentHTML(\'afterend\', \'<span class=\"error\">\' + message + \'</span>\');
}
function checkEmpty(field, prependText){
if (form[field].value === \"\"){
flagError(field, prependText);
isValidSubmission = false;
}
}
function validateForm() {
removeElementsByClass(\"error\");
checkEmpty(\"name\", \"First name\");
checkEmpty(\"city\", \"City\");
checkEmpty(\"address\", \"Address\");
return isValidSubmission;
}
var form = document.getElementById(\"aanmelden\"),
isValidSubmission = true;
form.onsubmit = validateForm;
</script>
</body>
</html>
.
![How wouuld I try to validate a form that has feel in the blanks and has radio buttons through an
external javascript file.
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form</title>
<style>
form{padding: 15px}
label{display: inline-block; text-align: right; width:60px; padding-right:5px;}
input[type=submit]{margin-top: 20px;}
.error{color: red; margin-left: 10px;}
</style>
</head>
<body>
<form action="" method="post" id ="aanmelden">
<div>
<label>Name:</label>
<input type="text" name="name" placeholder="Name">
</div>
<div>
<label>Address:</label>
<input type="text" name="address" placeholder="Address">
</div>
<div>
<label>City:</label>
<input type="text" name="city" placeholder="City">
</div>
<input type="submit" />](https://image.slidesharecdn.com/howwouulditrytovalidateaformthathasfeelintheblanksandha-230209002046-da13f1b6/85/How-wouuld-I-try-to-validate-a-form-that-has-feel-in-the-blanks-and-ha-docx-1-320.jpg)
![</form>
<script>
function removeElementsByClass(className){
elements = document.getElementsByClassName(className);
while(elements.length > 0){
elements[0].parentNode.removeChild(elements[0]);
}
}
function flagError(field, prependText){
var message = prependText + " cannot be left blank";
form[field].insertAdjacentHTML('afterend', '<span class="error">' + message + '</span>');
}
function checkEmpty(field, prependText){
if (form[field].value === ""){
flagError(field, prependText);
isValidSubmission = false;
}
}
function validateForm() {
removeElementsByClass("error");
checkEmpty("name", "First name");
checkEmpty("city", "City");
checkEmpty("address", "Address");
return isValidSubmission;
}
var form = document.getElementById("aanmelden"),
isValidSubmission = true;
form.onsubmit = validateForm;
</script>
</body>
</html>](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)