1 

function validate() { var errMsg = ""; var result = true; var fname = document.getElementById("fname").value; if (!fname.match(/^[a-zA-Z]+$/)) { errMsg += "Please enter your first name correctly.\n"; result = false; } var lname = document.getElementById("lname").value; if (!lname.match(/^[a-zA-Z]+$/)) { errMsg += "Please enter your last name correctly.\n"; result = false; } var email = document.getElementById("email").value; if (!email.match(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/)) { errMsg += "Please enter your email correctly.\n"; result = false; } var streetname = document.getElementById("streetname").value; if (!streetname.match(/^[a-zA-Z0-9\s]+$/)) { errMsg += "Please enter your street name correctly.\n"; result = false; } var suburb = document.getElementById("suburb").value; if (!suburb.match(/^[a-zA-Z\-]+$/)) { errMsg += "Please enter your suburb correctly.\n"; result = false; } var phone = document.getElementById("phone").value; if (!phone.match(/[0-9]{9}/)) { errMsg += "Please enter your phone number correctly.\n"; result = false; } var gender = document.getElementById("gender").value; var start = document.getElementById("start").value; var skill = document.getElementById("skill").value; var other = document.getElementById("other").value; var otherbox = document.getElementById("otherbox").value; var postcode = document.getElementById("postcode").value; var state = document.getElementById("state").options[ document.getElementById("state").selectedIndex ].text; var regex; //VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0. switch (state) { case "Please Select": return false; case "VIC": regex = new RegExp(/(3|8)\d+/); break; case "NSW": regex = new RegExp(/(1|2)\d+/); break; case "QLD": regex = new RegExp(/(4|9)\d+/); break; case "NT": regex = new RegExp(/0\d+/); break; case "WA": regex = new RegExp(/6\d+/); break; case "SA": regex = new RegExp(/5\d+/); break; case "TAS": regex = new RegExp(/7\d+/); break; case "ACT": regex = new RegExp(/0\d+/); break; } if (!postcode.match(regex)) { errMsg = errMsg + "State and postcode do not match\n"; result = false; } if (errMsg) { alert(errMsg); } if (result) { storeBooking( fname, lname, start, email, gender, phone, streetname, suburb, state, postcode, other, otherbox ); } return result; }
<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform"> <p>Your Name: <span id="job1"></span></p> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="required" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)"> <label for="start">Date of birth:</label> <input type="date" id="start" required="required" name="date of birth" value="2021-10-04" /> <br> <br> <label for="gender"> Select you gender</label> <br> <br> <select name="gender" id="gender" required="required"> <option value="" selected>Please Select</option> <option value="male">Male</option> <option value="female">Female</option> </select> <br> <label for="streetname">Street Address</label> <input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" /> <label for="suburb">Suburb/Town</label> <input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40"> <label for="state">Choose a state:</label> <br> <select name="state" id="state" required="required"> <option value="">Please Select</option> <option value="VIC">VIC</option> <option value="NSW">NSW</option> <option value="QLD">QLD</option> <option value="NT">NT</option> <option value="WA">WA</option> <option value="SA">SA</option> <option value="TAS">TAS</option> <option value="ACT">ACT</option> </select> <br> <br> <label for="postcode">Postcode</label> <input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$"> <label for="email">Email Address</label> <input type="text" id="email" name="emailadd" placeholder="Your email address.." required="required"> <label for="phone">Phone Number</label> <input type="text" id="phone" name="phonenumb" placeholder="e.g. 0451124561" minlength="8" maxlength="12" required="required"> <br> <input type="submit" value="Apply"> <br> <br> <input type="submit" id="cancelpurchase" value="Cancel Application"></input> </form>

How do I make it so that the error message shows up on the actual webpage, rather than an alert box, next to the input? I can't seem to find anything online about changing the default way an error message shows up. If you need less/more information, please suggest that to me.

Note: no jQuery or inline JavaScript.

Improve this question
1
  • You can delete your validation since the HTML5 validation works just fine an your validation is not run Commented Oct 4, 2021 at 8:54

2 Answers 2

Reset to default
1

You can make a <div id="popup"> Error message </div> with display: none and position: fixed and instead of alertion make this div visible document.querySelector('#popup').style.display = 'block' and a close button in it to close this popup

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You appear to be showing the error message with the following code:

if (errMsg) { alert(errMsg); }

If you instead get a reference to an element,

e.g var tgtElem = document.getElementById(textStringIdGoesHere);

You can then display the message by setting its textContent,

e.g tgtElem.textContent = errMsg;

Improve this answer

Comments