• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 241
  • Last Modified:

form validation script....

I need to validate this form...but before its submitted it needs to check in the SQL Server DB that the username they want is not already taken, then it needs to check they have entered their email twice, and that they match, and the same for password, it also needs to validate the email for a @ and . and needs to make sure all fields have something entered (apart from non-required ones) as well as make sure the right amount of characters have been entered. After the form I have put the functions I already have. Thanks:

<div class="registrationForm" name="registrationForm">

<form name="REGISTRATION" method="POST" action="#" ID="Form1">

<div class="accountType">
<table width="452" border="0" cellpadding="2" cellspacing="0" class="registrationForm" ID="Table2">
  <tr>
    <td colspan="3" class="critical"><b>All fields in RED are required</b></td>
  </tr>  
  <tr>
    <td colspan="3" class="sectionName">Choose Account</td>
  </tr>
  <tr>
    <td colspan="3"><hr class="registrationForm"></td>
  </tr>  
  <tr>
    <td class="critical">Account Type</td>
    <td class="field">
            <b>FREE ACCESS UNTIL - (date here)</b>
    </td>
    <td><a href="#" class="help" onmouseover="showtip(this,event,'CHOOSE YOUR TYPE OF ACCOUNT. TRIALS ARE FOR A PERIOD OF FIVE DAYS')" onmouseout="hidetip()">?</a></td>    
  </tr>
</table>

</div>
<br>
<div class="address">
<table width="452" border="0" cellpadding="2" cellspacing="0" class="registrationForm" ID="Table1">
  <tr>
    <td colspan="3" class="sectionName">Personal Details and Address</td>
  </tr>
  <tr>
    <td colspan="3"><hr class="registrationForm"></td>
  </tr>  
  <tr>
    <td class="critical">Preferred User Name</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="userName" ID="Text1">
    </td>
    <td><a href="#" class="help" onmouseover="showtip(this,event,'USED TO LOG INTO FFS')" onmouseout="hidetip()">?</a></td>    
  </tr>
  <tr>
    <td class="critical"></td>
    <td class="characterCount">
    <script>
      displaylimit("document.REGISTRATION.userName",20)
      </script>
    </td>
    <td></td>    
  </tr>
  <tr>
    <td class="critical">Your Email Address</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="userEmailOne" ID="Text2"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'MUST BE VALID TO ACTIVATE YOUR ACCOUNT AND MATCH THE CONFIRMING EMAIL')" onmouseout="hidetip()">?</a></td>  
  </tr>
  <tr>
    <td class="critical">Confirm Email</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="userEmailTwo" ID="Text3"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'MUST MATCH YOUR EMAIL ADDRESS')" onmouseout="hidetip()">?</a></td>      
  </tr>  
  <tr>
    <td class="critical">Password</td>
    <td class="field"><input type="password" class="registrationFormADDRESS" name="" ID="Password1"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'CHOOSE A PASSWORD. THIS IS NOT CASE SENSITIVE. MUST BE CONFIRMED BELOW')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td class="critical">Confirm Password</td>
    <td class="field"><input type="password" class="registrationFormADDRESS" name="" ID="Text4"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'CONFIRM YOUR PASSWORD')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td class="field">Street Address</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="" ID="Text5"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'HOUSE NUMBER AND STREET')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td>Village</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="" ID="Text6"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOUR VILLAGE, IF APPLICABLE')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td>Town</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="" ID="Text7"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOUR TOWN, IF APPLICABLE')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td class="critical">City</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="" ID="Text8"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOUR CITY')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td class="field">County</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="" ID="Text9"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOUR COUNTY')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td class="field">Postcode</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="postCode" ID="Text10"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOUR POSTCODE')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td class="critical">Country</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="" ID="Text11"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOUR COUNTRY')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td>Home Telephone</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="homePhone" ID="Text12"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'HOME TELEPHONE NUMBER')" onmouseout="hidetip()">?</a></td>      
  </tr>  
  <tr>
    <td>Mobile Telephone</td>
    <td class="field"><input type="text" class="registrationFormADDRESS" name="mobilePhone" ID="Text13"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'WE AIM TO LAUNCH A MEMBERS SMS SERVICE IN THE SECOND QUARTER OF 2003. YOUR MOBILE NUMBER WILL BE REQUIRED TO USE THIS')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td colspan="2" width="400"><b>You must accept the terms and conditions</b><input type="checkbox" name="TOS" ID="Checkbox1"></td>
      <td><a href="#" class="help" onmouseover="showtip(this,event,'YOU MUST ACCEPT THE TERMS AND CONDITIONS OF SERVICE IN ORDER TO SUBMIT THIS FORM')" onmouseout="hidetip()">?</a></td>      
  </tr>
  <tr>
    <td colspan="2" width="400"><INPUT type="submit" value="Submit" ID="Submit1" NAME="Submit1" onClick="checkEmail();"></td>
      <td><a href="#" class="help"></a></td>      
  </tr>  
</form>
 
</table>

</div>

SCRIPT FOR PAYMENT DETAILS:

var isIE=document.all?true:false;
var isDOM=document.getElementById?true:false;
var isNS4=document.layers?true:false;

/* _w : which ID (1) or (2) */
/* _h : (h)ide or (s)how */
function toggleT(_w,_h) {
  if (isDOM)
  {
    if (_h=='s') document.getElementById(_w).style.visibility='visible';
    if (_h=='h') document.getElementById(_w).style.visibility='hidden';
  }
  else if (isIE) {
    if (_h=='s') eval("document.all."+_w+".style.visibility='visible';");
    if (_h=='h') eval("document.all."+_w+".style.display='inline';");
  }
  else if(isNS4)
  {
    if (_h=='s') eval("document.layers['"+_w+"'].visibility='show';");
    if (_h=='h') eval("document.layers['"+_w+"'].visibility='hide';");
  }
}

SCRIPT TO COUNT REMAINING CHARACTERS:

var ns6=document.getElementById&&!document.all

function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}

function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}


function displaylimit(theform,thelimit){
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true);
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true);
}
}

SCRIPT TO HIGHLIGHT FIELDS:

var focusColor = '#E1E1E1';
var blurColor = '#ffffff';

function hotbox() {
var form, el, e, f = 0;
while (form = document.forms[f++]) {
e = 0;

while (el = form.elements[e++]) if (el.type == 'text' || el.type =='password' && typeof el.style != 'undefined') {
el.onfocus = new Function('this.style.background = "' + focusColor + '";' + 'this.style.border = "1px solid #B1B1B1";');
el.onblur = new Function('this.style.background = "' + blurColor + '";' + 'this.style.border = "1px solid #B1B1B1";');
}
}
}

onload = hotbox;

EMAIL CONFIRMATION SCRIPT:

function checkEmail(REGISTRATION) {
    if (document.REGISTRATION.userEmailOne.value != document.REGISTRATION.userEmailTwo.value)
    {
        alert('Those emails don\'t match!');
        return false;
    } else {
        return true;
    }
}

TOOLTIPS SCRIPTS:

function showtip(current,e,text)
{
   if (document.all)
   {
      thetitle=text.split('<br>')
      if (thetitle.length > 1)
      {
        thetitles=""
        for (i=0; i<thetitle.length; i++)
           thetitles += thetitle[i] + "\r\n"
        current.title = thetitles
      }
      else current.title = text
   }

   else if (document.layers)
   {
       document.tooltip.document.write(
           '<layer bgColor="#FFFFE7" style="border:1px ' +
           'solid black; font-size:12px;color:#000000;">' + text + '</layer>')
       document.tooltip.document.close()
       document.tooltip.left=e.pageX+5
       document.tooltip.top=e.pageY+5
       document.tooltip.visibility="show"
   }
}

function hidetip()
{
    if (document.layers)
        document.tooltip.visibility="hidden"
}

It may just be a question of combining the functions I already have?
0
ralphuk100
Asked:
ralphuk100
  • 4
  • 4
1 Solution
 
ralphuk100Author Commented:
oh... one more thing. It needs to save details to a cookie for later use or if the username they want has been taken it will take them back to the form and still have the details they already entered in it.
0
 
hartCommented:
Suggestion 1. For username : As soon as the user moves out from the username text box, pop up a window and in this window check for the existence of this particular username, and show the alert accordingly.

Or keep a button next to the username text box as check existence and as soon as the user clicks on it pop up a window and check for the usernames uniqueness.

In this way you do not leave the page and thus do not loose the filled up details

Suggetion for Email checks : this can be done as on submit call a function and validate each and every form element accordingly.

Also remember while validating a form inside a div it is better to put all the functions inside this layer, sometimes errors are thrown if the functions are put outside the div.

let me know...

Regards
Harish(hart).
0
 
ralphuk100Author Commented:
could you tell me how to make a check username button please?
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
hartCommented:
it is not a button.

say for eg:

you have a text box

<input type="text" name="username" value="">&nbsp;&nbsp; <input type="button" name="chkuser" value="Check Username" onclick="document.frm2.chkusername.value=document.frm.username.value;window.open('somepage.cfm','UsernameCheck','specify window properties width,height,scrollbars etc..');document.frm2.submit();">


now there will be another small form after the first form that is frm.(In your code Registration (form name))

And the second form is called frm2. (This should come inside the layer just after form1 (frm (in ur code - Registration)))

In frm2:

<form name="frm2" method="post" target="UsernameCheck" action="somepage.cfm">
 <input type="hidden" name="chkusername" value="">
</form>


And in somepage.cfm
you will get the value of the chkusername variable.
Compare it in the Database and show the text appropriately in the Pop Up window.

Hope this is clear.


Regards
Hart(harish)


0
 
ralphuk100Author Commented:
I will give it a go thanks, I presume that code works fine on asp?
0
 
hartCommented:
it will itz just javascript.

Let me know...

Regards
Hart(harish)
0
 
ralphuk100Author Commented:
Ok, I think I have worked out that what I need is a submit button below my name field, titled check name available. When clicked this should check the db for a memberID field that = what is in name field. If the name is already taken it returns "choose another name" or otherwise "this name is available" right?
0
 
hartCommented:
yes but check the username value in the db in a pop up screen.

so that you don't loose the main form..

just check my code and u will find how to do it..

Regards
Hart
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now