?
Solved

form validation script....

Posted on 2003-03-31
8
Medium Priority
?
230 Views
Last Modified: 2008-02-01
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
Comment
Question by:ralphuk100
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 

Author Comment

by:ralphuk100
ID: 8237402
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
 
LVL 11

Expert Comment

by:hart
ID: 8237681
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
 

Author Comment

by:ralphuk100
ID: 8237710
could you tell me how to make a check username button please?
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 11

Accepted Solution

by:
hart earned 200 total points
ID: 8237922
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
 

Author Comment

by:ralphuk100
ID: 8238072
I will give it a go thanks, I presume that code works fine on asp?
0
 
LVL 11

Expert Comment

by:hart
ID: 8243139
it will itz just javascript.

Let me know...

Regards
Hart(harish)
0
 

Author Comment

by:ralphuk100
ID: 8252770
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
 
LVL 11

Expert Comment

by:hart
ID: 8252822
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question