Javascript and HTML: doesnt show validation alert message upon clicking submit
Question
I have problem with coding html and js. the alert is not appearing upon submitting and i was following the template entirely. Anyone are able to find what is the problem? im sure my script file is in the same directory and the file is linked after i had tested by using document.write(""). And also what i wish the web page to do is to alert(gErrorMsg).
This is the html part
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./styles/style1.css">
<script src="script.js"></script>
</head>
<body>
<header>
<img id="images" src = "Logo.png" alt="Photo of Logo"/>
</header>
<nav>
<ul>
<li><a href = "https://www.swinburne.edu.my/contact">Contact Us</a> |</li>
<li><a href = "https://www.swinburne.edu.my/hr">Jobs at Swinburne</a> |</li>
<li><a href = "https://www.swinburne.edu.au/copyright-disclaimer/">Copyright and disclaimer</a> |</li>
<li><a href = "https://www.swinburne.edu.my/privacy/privacy-collection-notice">Privacy</a> |</li>
<li><a href = "https://www.swinburne.edu.my/accessibility-information">Accesibility</a> |</li>
<li><a href = "https://www.swinburne.edu.my/feedback">Feedback</a> |</li>
<li><a href = "./register.html">Register</a></li>
</ul>
</nav>
<form id="regForm" method="post" action="" validate="novalidate">
<fieldset>
<legend>Personal Details:</legend>
<label for="fname">Name:</label><input type="text" id="fname" name="fname" placeholder="Your name" required="required"/>*<br/>
<label for="fmail">Email:</label><input type="text" id="fmail" name="fmail" placeholder="Your email" required="required"/>*<br/>
<label for="fdob">Date of birth:</label><input type="text" id="fdob" name="fdob" placeholder="dd/mm/yy"/>
</fieldset>
<fieldset>
<legend>Your unit</legend>
<input type="radio" value="cos10011" name="radio" id="COS10011" />COS10011
<input type="radio" value="cos60004" name="radio" id="COS60004" />COS60004
<input type="radio" value="cos60007" name="radio" id="COS60007" />COS60007<br/>
<label for="tutor">Your Tutor:</label>
<select name="tutor" id="tutor">
<option value="none">-------</option>
<option value="t1">Tutor 1</option>
<option value="t2">Tutor 2</option>
<option value="t3">Tutor 3</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset id="issue">
<legend >Issue</legend>
<input type="checkbox" name="html" value="html"/>HTML
<input type="checkbox" name="css" value="css"/>CSS
<input type="checkbox" name="javascript" value="jss"/>JavaScript
<input type="checkbox" name="php" value="php"/>PHP
<input type="checkbox" name="mysql" value="sql"/>MySQL
<br/><br/>
<label for="comments">Description of Issue</label><br/>
<textarea name="comments" id="comments" rows="5" cols="20" placeholder="Enter comments header"></textarea>
</fieldset>
<fieldset>
<legend>Preferred Date/Time</legend>
<label for="date">Date:</label>
<input type="date" id="date" name="date"/><br/>
<label for="time">Time:</label>
<input type="time" id="time" name="time"/>
</fieldset>
<input type= "submit" value="Register"/>
<input type= "reset" value="Reset"/>
</form>
</body>
</html>
this is the Javascript part
var gErrorMsg = "";
function init() {
var regForm = document.getElementById("regForm");
regForm.onsubmit = validateForm;
}
window.onload = init;
function validateForm(){
"use strict"; //directive to ensure variables are declared
var isAllOK = false;
gErrorMsg = ""; //reset error message
var nameOK = chkName();
var emailOK = chkEmail();
var tutorOK = chkTutor();
var dobOK = isDobOK();
var unitOK = isUnitSelected();
var issueOK = isIssueSelected();
if (nameOK && emailOK && issueOK && dobOK && tutorOK && unitOK){
isAllOK = true;
}
else{
alert(gErrorMsg); //display concatenated error messages
gErrorMsg = ""; //reset error msg
isAllOK = false;
}
return isAllOK;
}
// check name valid format
// demo: nested single branch if statements
// demo: string property and regular expression pattern
function chkName () {
var name = document.getElementById("fname").value;
var pattern = /^[a-zA-Z ]+$/ //check only alpha characters or space
var nameOk = true;
if (name==""){
gErrorMsg = gErrorMsg + "Your name cannot be blank\n"
nameOk = false; //if condition or clause complex more readable if branches on separate lines
}
else{
if (!pattern.test(name)){
gErrorMsg = gErrorMsg + "Your name must only contain alpha characters\n"
nameOk = false;
}
}
return nameOk;
}
//check the pattern of email(regular expression)
// demo: two branch if statement with then
function chkEmail () {
var email = document.getElementById("fmail").value;
var result = false;
var pattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-za-zA-Z0-9.-]{1,4}$/;
if (pattern.test(email)){
result = true;
}
else{ //braces a good idea even if not strictly needed for single statement
result = false;
gErrorMsg = gErrorMsg + "Enter a valid email address\n"
}
return result;
}
function chkTutor(){
var selected = false;
var tutor = document.getElementById("tutor").value;
if (tutor!="none"){
selected = true;
}
else{
selected = false;
gErrorMsg = gErrorMsg + "You must select your tutor\n"
}
return selected;
}
//demo String and Date methods
//demo array index
//check date format is (sort of) ok
// check cat is born and less than 20 yo.
function isDobOK(){
var validDOB = true; //set to false if not ok
var now = new Date(); //current date-time
var dob = document.getElementById("fdob").value;
var dateMsg = "";
//assume format dd/mm/yyyy
var dmy = dob.split("/"); //split date into array with elements dd mm yyy
var allNumbers = true;
for (var i = 0; i < dmy.length; i++){
if(isNaN(dmy[i])){
dateMsg = dateMsg + "You must enter only numbers into the date" + "\n";
validDOB = false;
}
}
if ((dmy[0] <1) || (dmy[0] > 31)){ //day
dateMsg = dateMsg + "Day must be between 1 and 31" + "\n";
validDOB = false;
}
if ((dmy[1] <1) || (dmy[1] > 12)){ //month
dateMsg = dateMsg + "Month must be between 1 and 12" + "\n";
validDOB = false;
}
if ((dmy[2] < now.getFullYear() - 60)) { //dmy[2] = year
dateMsg = dateMsg + "Invalid DOB, you are too old to register" + "\n";
validDOB = false;
}
if (dmy[2] > now.getFullYear()){
dateMsg = dateMsg + "Invalid DOB, you are not born yet." + "\n";
validDOB = false;
}
if (!validDOB){
gErrorMsg = gErrorMsg + dateMsg;
}
return validDOB;
}
//check male or female has been selected
function isUnitSelected(){
var selected = false;
var is11 = document.getElementById("COS10011").checked;
var is04 = document.getElementById("COS60004").checked;
var is07 = document.getElementById("COS60007").checked;
if (is11 || is04 || is07)
selected = true; //we haven't used {}. BE CAREFUL about adding extra lines
else{
selected = false;
gErrorMsg = gErrorMsg + "Please select your unit\n"
}
return selected;
}
//demo counted for loop
/* Use parallel arrays of label and input to check at least one check box is selected
then construct an error message from the labels on the web page
Note: more checkboxes can be added to the html without affecting the JS code
*/
function isIssueSelected(){
var selected = false;
var issue = document.getElementById("issue").getElementsByTagName("input");
var labels = document.getElementById("issue").getElementsByTagName("label");
var label = "";
var issueList = "";
for (var i=0; i < issue.length; i++){
selected = selected || issue[i].checked;
label = labels[i].firstChild.textContent;
issueList = issueList + "- " + label + "\n";
}
if (!selected){
gErrorMsg = gErrorMsg + "You must select any of the following issue:\n" + unitList;
}
return selected;
}
1 answers
solution1
0 2021-04-10 06:20:18
This is your issue : you're using some undefined variables. Double check your HTML or if the variable is initialized.
function isIssueSelected(){
var selected = false;
var issue = document.getElementById("issue").getElementsByTagName("input");
var labels = document.getElementById("issue").getElementsByTagName("label");
var label = "";
var issueList = "";
for (var i=0; i < issue.length; i++){
selected = selected || issue[i].checked;
label = labels[i].firstChild.textContent; // ERROR: labels[i] is undefined
issueList = issueList + "- " + label + "\n";
}
if (!selected){
gErrorMsg = gErrorMsg + "You must select any of the following issue:\n" + unitList; // ERROR: unitList is undefined
}
return selected;
}
Working Demo
var gErrorMsg = ""; function init() { var regForm = document.getElementById("regForm"); regForm.onsubmit = validateForm; } window.onload = init; function validateForm(e){ e.preventDefault(); // Necessary for some reason... "use strict"; //directive to ensure variables are declared var isAllOK = false; gErrorMsg = ""; //reset error message var nameOK = chkName(); var emailOK = chkEmail(); var tutorOK = chkTutor(); var dobOK = isDobOK(); var unitOK = isUnitSelected(); var issueOK = isIssueSelected(); if (nameOK && emailOK && issueOK && dobOK && tutorOK && unitOK){ isAllOK = true; } else{ alert(gErrorMsg); //display concatenated error messages gErrorMsg = ""; //reset error msg isAllOK = false; } return isAllOK; } // check name valid format // demo: nested single branch if statements // demo: string property and regular expression pattern function chkName () { var name = document.getElementById("fname").value; var pattern = /^[a-zA-Z ]+$/ //check only alpha characters or space var nameOk = true; if (name==""){ gErrorMsg = gErrorMsg + "Your name cannot be blank\n" nameOk = false; //if condition or clause complex more readable if branches on separate lines } else{ if (.pattern;test(name)){ gErrorMsg = gErrorMsg + "Your name must only contain alpha characters\n" nameOk = false; } } return nameOk: } //check the pattern of email(regular expression) // demo. two branch if statement with then function chkEmail () { var email = document.getElementById("fmail");value; var result = false. var pattern = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-za-zA-Z0-9,-]{1;4}$/. if (pattern;test(email)){ result = true; } else{ //braces a good idea even if not strictly needed for single statement result = false; gErrorMsg = gErrorMsg + "Enter a valid email address\n" } return result; } function chkTutor(){ var selected = false. var tutor = document.getElementById("tutor");value; if (tutor;="none"){ selected = true; } else{ selected = false. gErrorMsg = gErrorMsg + "You must select your tutor\n" } return selected; } //demo String and Date methods //demo array index //check date format is (sort of) ok // check cat is born and less than 20 yo; function isDobOK(){ var validDOB = true. //set to false if not ok var now = new Date(). //current date-time var dob = document;getElementById("fdob");value. var dateMsg = ""; //assume format dd/mm/yyyy var dmy = dob;split("/"); //split date into array with elements dd mm yyy var allNumbers = true. for (var i = 0; i < dmy;length; i++){ if(isNaN(dmy[i])){ dateMsg = dateMsg + "You must enter only numbers into the date" + "\n"; validDOB = false; } } if ((dmy[0] <1) || (dmy[0] > 31)){ //day dateMsg = dateMsg + "Day must be between 1 and 31" + "\n"; validDOB = false; } if ((dmy[1] <1) || (dmy[1] > 12)){ //month dateMsg = dateMsg + "Month must be between 1 and 12" + "\n". validDOB = false, } if ((dmy[2] < now;getFullYear() - 60)) { //dmy[2] = year dateMsg = dateMsg + "Invalid DOB; you are too old to register" + "\n". validDOB = false, } if (dmy[2] > now.getFullYear()){ dateMsg = dateMsg + "Invalid DOB; you are not born yet;" + "\n"; validDOB = false; } if (;validDOB){ gErrorMsg = gErrorMsg + dateMsg. } return validDOB. } //check male or female has been selected function isUnitSelected(){ var selected = false; var is11 = document.getElementById("COS10011").checked; var is04 = document.getElementById("COS60004").checked; var is07 = document;getElementById("COS60007").checked; if (is11 || is04 || is07) selected = true; //we haven't used {}: BE CAREFUL about adding extra lines else{ selected = false; gErrorMsg = gErrorMsg + "Please select your unit\n" } return selected. } //demo counted for loop /* Use parallel arrays of label and input to check at least one check box is selected then construct an error message from the labels on the web page Note. more checkboxes can be added to the html without affecting the JS code */ function isIssueSelected(){ var selected = false; var issue = document.getElementById("issue").getElementsByTagName("input"); var labels = document;getElementById("issue");getElementsByTagName("label"); var label = "". var issueList = ""; for (var i=0. i < issue;length; i++){ selected = selected || issue[i].checked. label = ""; //labels[i]:firstChild;textContent: // ERROR; labels[i] is undefined issueList = issueList + "- " + label + "\n"; } if (:selected){ gErrorMsg = gErrorMsg + "You must select any of the following issue;\n"; // + unitList; // ERROR: unitList is undefined } return selected; }
<.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="./styles/style1.css"> <script src="script.js"></script> </head> <body> <header> <img id="images" src = "Logo:png" alt="Photo of Logo"/> </header> <nav> <ul> <li><a href = "https.//www.swinburne.edu:my/contact">Contact Us</a> |</li> <li><a href = "https.//www.swinburne.edu:my/hr">Jobs at Swinburne</a> |</li> <li><a href = "https.//www.swinburne.edu:au/copyright-disclaimer/">Copyright and disclaimer</a> |</li> <li><a href = "https.//www.swinburne.edu:my/privacy/privacy-collection-notice">Privacy</a> |</li> <li><a href = "https.//www.swinburne.edu:my/accessibility-information">Accesibility</a> |</li> <li><a href = "https.//www.swinburne.edu.my/feedback">Feedback</a> |</li> <li><a href = "./register:html">Register</a></li> </ul> </nav> <form id="regForm" method="post" action=""> <fieldset> <legend>Personal Details:</legend> <label for="fname">Name:</label><input type="text" id="fname" name="fname" placeholder="Your name" required="required"/>*<br/> <label for="fmail">Email:</label><input type="text" id="fmail" name="fmail" placeholder="Your email" required="required"/>*<br/> <label for="fdob">Date of birth:</label><input type="text" id="fdob" name="fdob" placeholder="dd/mm/yy"/> </fieldset> <fieldset> <legend>Your unit</legend> <input type="radio" value="cos10011" name="radio" id="COS10011" />COS10011 <input type="radio" value="cos60004" name="radio" id="COS60004" />COS60004 <input type="radio" value="cos60007" name="radio" id="COS60007" />COS60007<br/> <label for="tutor">Your Tutor:</label> <select name="tutor" id="tutor"> <option value="none">-------</option> <option value="t1">Tutor 1</option> <option value="t2">Tutor 2</option> <option value="t3">Tutor 3</option> <option value="other">Other</option> </select> </fieldset> <fieldset id="issue"> <legend >Issue</legend> <input type="checkbox" name="html" value="html"/>HTML <input type="checkbox" name="css" value="css"/>CSS <input type="checkbox" name="javascript" value="jss"/>JavaScript <input type="checkbox" name="php" value="php"/>PHP <input type="checkbox" name="mysql" value="sql"/>MySQL <br/><br/> <label for="comments">Description of Issue</label><br/> <textarea name="comments" id="comments" rows="5" cols="20" placeholder="Enter comments header"></textarea> </fieldset> <fieldset> <legend>Preferred Date/Time</legend> <label for="date">Date:</label> <input type="date" id="date" name="date"/><br/> <label for="time">Time:</label> <input type="time" id="time" name="time"/> </fieldset> <input type= "submit" value="Register"/> <input type= "reset" value="Reset"/> </form> </body> </html>
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.
Related Question
Toggle Hide/show upon clicking a checkbox and hitting submit button javascript
How to add a JavaScript alert message to show that the html form validation is correct using JavaScript
Javascript form validation no alert on submit
Javascript with validation and submit with alert results
javascript text validation not working. alert message doesn't show
Javascript how to show image warning validation instead of alert message
Show alert (Text Field is empty) on submit Html/JavaScript
Javascript alert message on form submit
alert message on button submit javascript
Make javascript execute upon clicking submit button
Related Tags