Hello!
I am in the process of creating a javascript file that will do the following:
- identify if the focused input value matches the RegExp pattern.
- If the value does not match the pattern it will replace the class with a different class and visa versa if value matches pattern
- Disable submit button until all required input values match their respective RegExp.
I’ve decided to depreciate the label tag and use the placehoder attribute in HTML5 to inform viewers which input fields require what values. Therefore I’ve decided to use the three following classes: “required”, “validEntry”, “invalidEntry”. They are coded pretty basically in my external css:
.validEntry::-webkit-input-placeholder { color: green; }
.invalidEntry::-webkit-input-placeholder { color: red; }
One of the major issues I am running into currently is how to create a javascript file that will run through my form’s required input fields and match each with its respective RegExp. Initially my thoughts were to pair regular expressions with the name attribute, but now I am thinking it might be easier to use the pattern attribute per input - but I would like to preserve the content/presentation/behavior rules of web design as much as possible.
What are your thoughts?
Here are my files as of current (I decided to delete all of my javascript attempts as they crashed and burned horribly)
<!doctype html>
<html lang="en" manifest="cache.manifest">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<link rel="stylesheet" href="CSS_formAttributes.css">
<script src="core.js"></script>
<script src="formValidate.js"></script>
</head>
<head>
</head>
<body>
<form id="register" method="post">
<hgroup>
<h1>Sign up</h1>
</hgroup>
<ul>
<li>
<label for="firstName"></label>
<input type="text" id="firstName" name="f_name" placeholder="First Name" class="required">
</li>
<li>
<label for="lastName"></label>
<input type="text" id="lastName" name="l_name" placeholder="Last Name" class="required">
</li>
<li>
<label for="email"></label>
<input type="text" id="email" name="email" placeholder="Email Address" class="required">
</li>
<li>
<label for="userName"></label>
<input type="text" id="userName" name="u_name" placeholder="User Name" class="required">
</li>
<li>
<label for="password"></label>
<input type="text" id="password" name="password" placeholder="Password" class="required">
</li>
<li>
<input type="submit" name="submit" id="submit" class="submit">
</li>
</ul>
</form>
</body>
</html>
/*Chrome Workarounds all*/
::-webkit-input-placeholder { color:black; }
/*Firefox Workaround all*/
input:-moz-placeholder { color:#f00; }
/*Chrome Workaround individual*/
.validEntry::-webkit-input-placeholder { color: green; }
.invalidEntry::-webkit-input-placeholder { color: red; }
invalid: function(red)
{
core.removeClass(reqInput, "required");
core.addClass(reqInput, "invalidEntry");
},
valid: function(green)
{
core.removeClass(reqInput, "required");
core.addClass(reqInput, "validEntry");
},
focusListener: function(event)
{
var activeElement = this;
if (activeElement = _fName)
{
}
}
Thanks!