SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2012
    Location
    Astoria, NY
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamic Form Validation

    Hello!

    I am in the process of creating a javascript file that will do the following:

    1. identify if the focused input value matches the RegExp pattern.
    2. If the value does not match the pattern it will replace the class with a different class and visa versa if value matches pattern
    3. 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)

    Code HTML5:
    <!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>

    Code CSS:
    /*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; }

    Code JavaScript:
    	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!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,527
    Mentioned
    84 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BenjaminSV View Post
    I've decided to depreciate the label tag and use the placehoder attribute in HTML5 to inform viewers which input fields require what values.
    Quote Originally Posted by BenjaminSV View Post
    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.
    Since you're going with HTML5 features, you should remain with them by using the required attribute.

    HTML Code:
    <input name="f_name" placeholder="First Name" required>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •