Registration form validation, enabling submit button on success

[slyte33]

Hi, I'm not too sure if this needs to be in the PHP or javascript section, because I'm not sure what the problem is.

Basically, I have a register form, but right now I'm working with one field: Username.

I have a "Continue" button that takes you to the next step of the registration. The continue button should be disabled until the username textfield has more than 3 characters, less than 15 characters, and the username cannot be taken(this is where i'm having trouble).

 

The problem is that the button enables even when the username is already taken. It works fine with the min/max chars.

 

 

All of this is dynamic, I will give the HTML, PHP, and javascript code below.

 

 

HTML

<span class='title'>Character:</span>
<input type='text' id='username' name='username' onkeyup="check();"><span id=error1></span>
<span id=error2></span>

 

PHP

<?php
$user_name='Example';

if ($user_name=='Example') 
{
echo "no";
}
else
{
  echo "yes";
}
?>

 

Javascript

<script>
err=0;
function check()
{
$step1 = $('#step1');  
  
var trigger = true;
var username = document.getElementById('username');
username2 = document.getElementById('username').value;


if (username.value.length <= 3) {
err=1;
document.getElementById('error1').innerHTML = '<img src=views/images/cross.png></img> Username is too short(4 characters min)';
}else if (username.value.length >= 16) {
err=1;
document.getElementById('error1').innerHTML = '<img src=views/images/cross.png></img> Username is too long(15 characters max)';
}else{


------------------------------------------------------------------------------------
------------------------------------------------------------------------------------
THE PROBLEM IS BELOW, THE FUNCTION ISN'T CALLING THE "err" variable
------------------------------------------------------------------------------------
------------------------------------------------------------------------------------


$.post("[my domain was here]",{username:$(username).val() } ,function(data)
{
  if(data=='no') 
  {
  err=1;
  document.getElementById('error1').innerHTML = '<img src=views/images/cross.png></img> Chracter name has already been taken';
  } else {
  err=0;
document.getElementById('error1').innerHTML = '<img src=views/images/tick.png></img>';
     }
});
}


if (err==0)
{
trigger=false;
}
   
    trigger ? $step1.attr('disabled', true) : $step1.removeAttr('disabled');
}
</script>

 

Everything works fine. The problem, I think, is at the bottom of my javascript code.

 

 

[Psycho]

You would have to implement AJAX (JavaScript + PHP) in order to do what you want. But, even if you do, you still need to build it so that the username validation will occur after the submit as well, for two reasons:

 

1) Users may have JS disabled, in which case, the username validation won't take place.

2) Concurrency: Two users can open the registration page and enter the same, unused, username. Since the username doesn't exist neither of them will get a client-side validation error. But, if user 1 then submits the page, that username will get created. User 2 would then submit his page. You MUST always have server-side validation.

 

So, start with implementing just server-side validation of the username when the page is submitted. Then, you can work on adding client-side validation on top of that. But, client-side validation should NEVER take the place of server-side validation.

 

Also, implementing an AJAX solution will require some thought. You don't want to do it on each press of the key since the time to query the server and come back will be longer than the time for the user to press the next key. So, onchange() would seem a good choice. but, what if the user enters the username into the field and the focus is still in the field. The submit button will still be disabled and the user may not know why it is that way. It creates a usability issue.

 

Here is what I wouold do. Implement the form with just server-side validation. Then, add a button called "check username" that the user can click to check the username is not in use before submitting the form. Not exactly automated, but it won't have the issues described above.

[slyte33]

You would have to implement AJAX (JavaScript + PHP) in order to do what you want. But, even if you do, you still need to build it so that the username validation will occur after the submit as well, for two reasons:

 

1) Users may have JS disabled, in which case, the username validation won't take place.

2) Concurrency: Two users can open the registration page and enter the same, unused, username. Since the username doesn't exist neither of them will get a client-side validation error. But, if user 1 then submits the page, that username will get created. User 2 would then submit his page. You MUST always have server-side validation.

 

So, start with implementing just server-side validation of the username when the page is submitted. Then, you can work on adding client-side validation on top of that. But, client-side validation should NEVER take the place of server-side validation.

 

Also, implementing an AJAX solution will require some thought. You don't want to do it on each press of the key since the time to query the server and come back will be longer than the time for the user to press the next key. So, onchange() would seem a good choice. but, what if the user enters the username into the field and the focus is still in the field. The submit button will still be disabled and the user may not know why it is that way. It creates a usability issue.

 

Here is what I wouold do. Implement the form with just server-side validation. Then, add a button called "check username" that the user can click to check the username is not in use before submitting the form. Not exactly automated, but it won't have the issues described above.

 

I sent you a PM.

I am using server side validation also, i'll just give the link to the webpage. When visiting, click Create character and type only in the username box. the only username taken is "test", which is where the error occurs.

 

http://foarpg.com/game/login/