Hi everyone,

I'm new to the site and a newbie to js. I have been struggling to find the right solution to validating a username in a form to make sure it is unique. I don't want to use Dreamweaver's validate username because I want the error to appear on the same page next to the form field as it does with the Spry Validation. I use Spry validation for all the fields but it doesn't check to make sure the username doesn't already exist. I was wondering if anyone knew the code I would need to add to SpryValidationTextField.js, SpryValidationTextField.css and the actual form page to make this happen. I appreciate any feedback. Thanks.

Recommended Answers

All 6 Replies

If you want it to check to see if the username is already in use, then you would have to use server side language ie..asp,cf, or php to check to see if the username has already been used by accessing the database and running a query.

Thanks for the response. I currently have it validating the username onkeyup in the form, which uses a php file to check. It shows me at every keystroke whether the username is taken or not but doesn't stop me from submitting the form and inserting the record. It also doesn't line up the response with the form field. It forces itself down and to the left side. I was hoping to use the same formatting as the Spry that I use to validate all the other fields. Could I validate with the php file and then use the SpryValidationTextField to work with the other validations and use the same formatting? Am I looking at this entirely the wrong way? Below is the code from my form page:

head code:

<!-- START Spry Check Username -->
<script type="text/javascript"> 
	<!--
	var checkLogin = function () {
		//get the value of their login name
		var cons_username = document.consultant_signup_form.cons_username.value;
		//check the db to see if its available
		window.Spry.Utils.updateContent('response', 'signup_check.php?login=' + cons_username);
	}
	//-->
</script>
<!-- END Spry Check Username -->

Form field:

<label for="cons_username">Username</label>
      <span id="sprytextfield6">
      <input "width:150px" type="text" name="cons_username" id="cons_username" value="" tabindex="11" onkeyup="checkLogin()" />
      <span class="textfieldRequiredMsg">A value is required.</span></span></p> 
      <div id="response"></div>

Validation Page:

mysql_select_db(xxxxxxx,xxxxxxxxxx);
  //get the desired username
  $login = "-1";
  if (isset($_GET['login'])) {
  $login = $_GET['login'];
  }
  $query_usernames = sprintf("SELECT consultants.username FROM consultants WHERE username = %s", GetSQLValueString($login, "text"));
  $usernames = mysql_query($query_usernames, $conn_oilmatch) or die(mysql_error());
  $row_usernames = mysql_fetch_assoc($usernames);
  $totalRows_usernames = mysql_num_rows($usernames);
//check to see if it's available
  if($totalRows_usernames > 0) {
  echo "<span class=\"sorry\" id=\"response\">Unavailable!</span>";
  } else {
  echo "<span class=\"success\" id=\"response\">Available!</span>";
  }
//trigger the validation function 
  echo '<script type="text/javascript"> validLogin() </script>';
mysql_free_result($usernames);

Hope that helps. Thanks.

If you want to stop form from submitting, you may use 'onsubmit = "return aFunction()"' in form tag to do it. If the returned value is true, the form will be submitted; otherwise, it will stay on the page and wait for another submission. One problem here, if you have a Cancel button using submit button, the form will also be submitted. So you may deal with the Cancel button either by using 'button' type or via server side.

I tried the onsubmitt, but it still submits the form even though I enter a username that is already taken. I don't have a cancel button, just a submit. I would like it to show the error message right beside the form field in the same formatting as the Spry errors and, of course, not submit when the username is unavailable. Originally, I was hoping I could validate the username in a php page, which I have (not totally validating though as it still submits). I wanted to then call the SpryValidationTextField.js and have it format the way the error is shown on the screen. I am not stuck to the idea of having each letter of the username validated. I would be happy with onsubmit if I could get it to work this way. Any ideas?

Ok, I now have the error showing up in the right place (beside the field) by changing the div id="response" to span class="response" id="response" and nesting it in the span id="SpryTextField6" tag. I just need for it to enforce the unique username.

nw:

Could you give me a link to the spryvalidationtextfield script or manual that you are using? I searched on the Internet and didn't find what you are using (window.Spry).

By the way, just look at your code of checkLogin(), I am sure why you need to create it as a variable instead of just a plain function? Anyway, you could pass an argument 'this' as checkLogin(this) to the function, so you do not need to hard-coded to get cons_username but use the argument.value instead.

<script type="text/javascript">
function checkLogin(inputElement) {
  // if and only if the code below is called correctly
  window.Spry.Utils.updateContent('response', 'signup_check.php?login=' + inputElement.value);
}
</script>

// and in HTML
<input "width:150px" type="text" name="cons_username" id="cons_username" value="" tabindex="11" onkeyup="checkLogin(this)" />
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.