Jump to content

field hints


droidus

Recommended Posts

form:

<div style="width:300px; line-height:2em; padding:15px;">

     

<form id="login-form" action="" method="post">

    <label for="login">User ID</label><br />

<input type="text" name="uname" id="uname" value="<? if (isset($login_errors)) {echo $_POST['uname'];} ?>" style="font-size:16px;" />

<div class="clear" style="height:15px;"></div>

 

<label for="password">Password</label><br />

<input name='pword' type='password' value="<? if (isset($login_errors)) {echo $_POST['pword'];} ?>" style="font-size:16px;" />

<div class="clear" style="height:15px;"></div>

 

<label for="remember_me" style="padding: 0;">Remember me?</label>

<input type="checkbox" id="remember_me" style="position: relative; top: 3px; margin: 0; " name="remember_me" disabled="disabled"/>

<div class="clear"></div>

 

<input type="submit" class="button" name="login" value="Login" style="background-color:#FC0; font-weight:bold; padding:5px; border:none;" />

  </form>

 

javascript code:

<script type="text/javascript">

 

function checkUsernameForLength(whatYouTyped) {

var fieldset = whatYouTyped.parentNode;

var txt = whatYouTyped.value;

if (txt.length > 5) {

fieldset.className = "welldone";

}

else {

fieldset.className = "";

}

}

 

 

 

 

function checkPassword(whatYouTyped) {

var fieldset = whatYouTyped.parentNode;

var txt = whatYouTyped.value;

if (txt.length > 3 && txt.length < 8) {

fieldset.className = "kindagood";

} else if (txt.length > 7) {

fieldset.className = "welldone";

} else {

fieldset.className = "";

}

}

function checkEmail(whatYouTyped) {

var fieldset = whatYouTyped.parentNode;

var txt = whatYouTyped.value;

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {

fieldset.className = "welldone";

} else {

fieldset.className = "";

}

}

 

 

 

function addLoadEvent(func) {

  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      oldonload();

      func();

    }

  }

}

 

 

function prepareInputsForHints() {

  var inputs = document.getElementsByTagName("input");

  for (var i=0; i<inputs.length; i++){

    inputs.onfocus = function () {

      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

    }

    inputs.onblur = function () {

      this.parentNode.getElementsByTagName("span")[0].style.display = "none";

    }

  }

}

addLoadEvent(prepareInputsForHints);

 

</script>

Link to comment
https://forums.phpfreaks.com/topic/244083-field-hints/#findComment-1253839
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.