HTML5 Form: Page Is Reloading Instantly After Restyling (And It Shouldn't Be)

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Posted by user3689753 on Stack Overflow See other posts from Stack Overflow or by user3689753
Published on 2014-06-12T21:22:01Z Indexed on 2014/06/12 21:24 UTC
Read the original article Hit count: 200

Filed under:
|

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>
                &copy; 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;
}

© Stack Overflow or respective owner

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Related posts about JavaScript

Related posts about html5

Categories cloud

.NET ASP.NET iphone linux python Windows mysql android sql windows-7 html c ruby-on-rails css objective-c ubuntu networking sql-server wpf asp.net-mvc ruby database Xml apache AJAX osx security regex django Performance 12.04 windows-xp mac web-development iphone-sdk vb.net Silverlight apache2 flash server perl best-practices email installation eclipse visual-studio algorithm windows-server-2008 winforms wcf firefox bash dns /Oracle