Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Javascript validation not overriding original css form colors
- .invalid{
- background-color:#ff9;
- border: 2px red inset;
- }
- .reqd{
- background-color:#222222;
- color:#555555; border-style: solid;
- border-color:#555555;
- border-width: 1px;
- }
- <!DOCTYPE html>
- <?php
- // Debug
- error_reporting(E_ALL);
- ?>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" href="styles.css" type="text/css">
- <script src="js/jquery-1.7.2.min.js"></script>
- <script src="js/regauth.js"></script>
- <title></title>
- </head>
- <body id="registerBody">
- <section id="registerBox">
- <form id="registerForm" method="post" action="regauth.php">
- <p>Welcome to the atlas registraton! Please fill out the information below.</p>
- <br>
- <p><label for="firstName">First Name: <input type="text" size="30" id="firstName" name="firstName" class="reqd"></label></p>
- <p><label for="lastName">Last Name: <input type="text" size="30" id="lastName" name="lastName" class="reqd"></label></p>
- <p><label for="email">Email: <input type="text" size="30" id="email" name="email" class="reqd"></label></p>
- <br>
- <br>
- <p><label for="reqUsername">Username: <input type="text" size="30" id="reqUsername" name="reqUsername" class="reqd"></label></p>
- <p><label for="passOne">Password: <input type="password" size="30" id="passOne" name="passOne" class="reqd"></label></p>
- <p><label for="passTwo">Confirm Password: <input type="password" size="30" id="passTwo" name="passTwo" class="reqd"></label></p>
- <br>
- <br>
- <p><input type="submit" value="Submit"> <input type="reset" value="Reset Form" class="reset"></p>
- </form>
- </section>
- <script type="text/javascript">
- $("#registerBox").css("margin-left", ($(window).width()-425)/2);
- $("#registerBox").css("margin-top", ($(document).height()-500)/2);
- $('#registerBox').fadeIn(1500);
- </script>
- </body>
- </html>
- window.onload = initForms;
- //Function loops through each form. For each one it adds an event handler to that forms 'onSubmit'.
- function initForms() {
- for (var i = 0; i < document.forms.length; i++) {
- document.forms[i].onsubmit = validForm;
- }
- }
- function validForm() {
- var allGood = true;
- var allTags = document.getElementsByTagName("*");
- for (var i = 0; i < allTags.length; i++) {
- if (!validTag(allTags[i])) {
- allGood = false;
- }
- }
- return allGood;
- function validTag(thisTag) {
- var outClass = "";
- var allClasses = thisTag.className.split(" ");
- for (var j = 0; j < allClasses.length; j++) {
- outClass += validBasedOnClass(allClasses[j]) + " ";
- }
- thisTag.className = outClass;
- if (outClass.indexOf("invalid") > -1) {
- thisTag.focus();
- if (thisTag.nodeName == "INPUT") {
- thisTag.select();
- }
- return false;
- }
- return true;
- function validBasedOnClass(thisClass) {
- var classBack = "";
- switch (thisClass) {
- case "":
- case "invalid":
- break;
- case "reqd":
- if (allGood && thisTag.value == "") {
- classBack = "invalid ";
- }
- classBack += thisClass;
- break;
- default:
- classBack += thisClass;
- }
- return classBack;
- }
- }
Add Comment
Please, Sign In to add comment