HTML5 Form: Page Is Reloading Instantly After Restyling (And It Shouldn't Be)
- by user3689753
I have a form. I have made it so that if your name is not put in, a red border is put on the name field. That works, BUT...it's for a split second, and then the page reloads. I want the red border to appear, and then stay there. For some reason it's for a split second. Can someone help me make it so the page doesn't reload after displaying the red border?
Here's the script.
window.onload = function() {
document.getElementById("Hogwarts").onsubmit = function ()
{
window.alert("Form submitted. Owl being sent...");
var fname = document.getElementById("fName");
if(!fName.value.match("^[A-Z][A-Za-z]+( [A-Z][A-Za-z]*)*$"))
{
window.alert("You must enter your name.");
addClass(fName, "errorDisp");
document.getElementById("fName").focus();
}
else
return true;
}
}
function addClass(element, classToAdd)
{
var currentClassValue = element.className;
if (currentClassValue.indexOf(classToAdd) == -1) {
if ((currentClassValue == null) || (currentClassValue === "")) {
element.className = classToAdd;
} else {
element.className += " " + classToAdd;
}
}
}
function removeClass(element, classToRemove)
{
var currentClassValue = element.className;
if (currentClassValue == classToRemove) {
element.className = "";
return;
}
var classValues = currentClassValue.split(" ");
var filteredList = [];
for (var i = 0 ; i < classValues.length; i++) {
if (classToRemove != classValues[i]) {
filteredList.push(classValues[i]);
}
}
element.className = filteredList.join(" ");
}
Here's the HTML.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Hogwarts School of Witchcraft And Wizardry Application Form</title>
<link rel="stylesheet" type="text/css" href="main.css" media="screen"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<section>
<header>
<h1>Hogwarts School of Witchcraft And Wizardry</h1>
<nav></nav>
</header>
<main>
<form method="post" id="Hogwarts">
<!--<form action="showform.php" method="post" id="Hogwarts">--!>
<fieldset id="aboutMe">
<legend id="aboutMeLeg">About Me</legend>
<div class="fieldleading">
<label for="fName" class="labelstyle">First name:</label>
<input type="text" id="fName" name="fName" autofocus maxlength="50" value="" placeholder="First Name" size="30">
<label for="lName" class="labelstyle">Last name:</label>
<input type="text" id="lName" name="lName" required maxlength="50" value="" placeholder="Last Name" pattern="^[A-Za-z ]{3,}$" size="30">
<label for="age" class="labelstyle">Age:</label>
<input type="number" id="age" name="age" required min="17" step="1" max="59" value="" placeholder="Age">
</div>
<div class="fieldleading">
<label for="date" class="labelstyle">Date Of Birth:</label>
<input type="date" name="date1" id="date" required autofocus value="">
</div>
<div id="whitegender">
<div class="fieldleading">
<label class="labelstyle">Gender:</label>
</div>
<input type="radio" name="sex" value="male" class="gender" required="required">Male<br/>
<input type="radio" name="sex" value="female" class="gender" required="required">Female<br/>
<input type="radio" name="sex" value="other" class="gender" required="required">Other
</div>
</fieldset>
<fieldset id="contactInfo">
<legend id="contactInfoLeg">Contact Information</legend>
<div class="fieldleading">
<label for="street" class="labelstyle">Street Address:</label>
<input type="text" id="street" name="street" required autofocus maxlength="50" value="" placeholder="Street Address" pattern="^[0-9A-Za-z\. ]+{5,}$" size="35">
<label for="city" class="labelstyle">City:</label>
<input type="text" id="city" name="city" required autofocus maxlength="30" value="" placeholder="City" pattern="^[A-Za-z ]{3,}$" size="35">
<label for="State" class="labelstyle">State:</label>
<select required id="State" name="State" >
<option value="Select Your State">Select Your State</option>
<option value="Delaware">Delaware</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="New Jersey">New Jersey</option>
<option value="Georgia">Georgia</option>
<option value="Connecticut">Connecticut</option>
<option value="Massachusetts">Massachusetts</option>
<option value="Maryland">Maryland</option>
<option value="New Hampshire">New Hampshire</option>
<option value="New York">New York</option>
<option value="Virginia">Virginia</option>
</select>
</div>
<div class="fieldleading">
<label for="zip" class="labelstyle">5-Digit Zip Code:</label>
<input id="zip" name="zip" required autofocus maxlength="5" value="" placeholder="Your Zip Code" pattern="^\d{5}$">
<label for="usrtel" class="labelstyle">10-Digit Telephone Number:</label>
<input type="tel" name="usrtel" id="usrtel" required autofocus value="" placeholder="123-456-7890" pattern="^\d{3}[\-]\d{3}[\-]\d{4}$">
</div>
<div class="fieldleading">
<label for="email1" class="labelstyle">Email:</label>
<input type="email" name="email1" id="email1" required autofocus value="" placeholder="[email protected]" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" size="35">
<label for="homepage1" class="labelstyle">Home Page:</label>
<input type="url" name="homepage1" id="homepage1" required autofocus value="" placeholder="http://www.hp.com" pattern="https?://.+" size="35">
</div>
</fieldset>
<fieldset id="yourInterests">
<legend id="yourInterestsLeg">Your Interests</legend>
<label for="Major" class="labelstyle">Major/Program Choice:</label>
<select required id="Major" name="Major" >
<option value="">Select Your Major</option>
<option value="Magic1">Magic Horticulture</option>
<option value="Magic2">Black Magic</option>
<option value="White">White Magic</option>
<option value="Blue">Blue Magic</option>
<option value="Non">Non-Wizardry Studies</option>
</select>
</fieldset>
<button type="submit" value="Submit" class="submitreset">Submit</button>
<button type="reset" value="Reset" class="submitreset">Reset</button>
</form>
</main>
<footer>
© 2014 Bennett Nestok
</footer>
</section>
</body>
</html>
Here's the CSS.
a:link {
text-decoration: none !important;
color:black !important;
}
a:visited {
text-decoration: none !important;
color:red !important;
}
a:active {
text-decoration: none !important;
color:green !important;
}
a:hover {
text-decoration: none !important;
color:blue !important;
background-color:white !important;
}
::-webkit-input-placeholder { color: #ffffff; } /* gray80 */
:-moz-placeholder { color: #ffffff; } /* Firefox 18- (one color)*/
::-moz-placeholder { color: #ffffff; } /* Firefox 19+ (double colons) */
:-ms-input-placeholder { color: #ffffff; }
body {
margin: 0px auto;
text-align:center;
background-color:grey;
font-weight:normal;
font-size:12px;
font-family: verdana;
color:black;
background-image:url('bgtexture.jpg');
background-repeat:repeat;
}
footer {
text-align:center;
margin: 0px auto;
bottom:0px;
position:absolute;
width:100%;
color:white;
background-color:black;
height:20px;
padding-top:4px;
}
h1 {
color:white;
text-align:center;
margin: 0px auto;
margin-bottom:50px;
width:100%;
background-color:black;
padding-top: 13px;
padding-bottom: 14px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
button.submitreset {
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
border-radius: 400px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.labelstyle {
background-color:#a7a7a7;
color:black;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
border-radius: 400px;
padding:3px 3px 3px 3px;
}
#aboutMe, #contactInfo, #yourInterests {
margin-bottom:30px;
text-align:left !important;
padding: 10px 10px 10px 10px;
}
#Hogwarts {
text-align:center;
margin:0px auto;
width:780px;
padding-top: 20px !important;
padding-bottom: 20px !important;
background: -webkit-linear-gradient(#474747, grey); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#474747, grey); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#474747, grey); /* For Firefox 3.6 to 15 */
background: linear-gradient(#474747, grey); /* Standard syntax */
border-color:black;
border-style: solid;
border-width: 2px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
@media (max-width: 800px){
.labelstyle {
display: none;
}
#Hogwarts {
width:300px;
}
h1 {
width:304px;
margin-bottom:0px;
}
.fieldleading {
margin-bottom:0px !important;
}
::-webkit-input-label { /* WebKit browsers */
color: transparent;
}
:-moz-label { /* Mozilla Firefox 4 to 18 */
color: transparent;
}
::-moz-label { /* Mozilla Firefox 19+ */
color: transparent;
}
:-ms-input-label { /* Internet Explorer 10+ */
color: transparent;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: grey !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: grey !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: grey !important;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: grey !important;
}
#aboutMe, #contactInfo, #yourInterests {
margin-bottom:10px;
text-align:left !important;
padding: 5px 5px 5px 5px;
}
}
br {
display: block;
line-height: 10px;
}
.fieldleading {
margin-bottom:10px;
}
legend {
color:white;
}
#whitegender {
color:white;
}
#moreleading {
margin-bottom:10px;
}
/*opera only hack attempt*/
@media not all and (-webkit-min-device-pixel-ratio:0) {
.fieldleading {
margin-bottom:30px !important;
}
}
.errorDisp {
border-color: red;
border-style: solid;
border-width: 2px;
}
