Custom Validator Error Message Javascript
Create An Ajax Supported Registration Form With Whizbase
This tutorial will discuss the fancy secure registration forms, with AJAX technology support. In this article I suppose you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP.
The Structure
I will first explain the structure of our registration form, as I am using AJAX, I will not have any refresh for our page, so I will have one main page with the HTML and JS code.
For validation process I will use one WhizBase file, for submitting of the registration data I will use another WhizBase file.
To store the registration information I will need a DB, I will use the simplest one, Microsoft Access DB.
Every registration process needs a confirmation process to reduce spam registrations. So I will need one WhizBase file for confirmation, for sendin the email I will use two files I wil explain later why.
Now let give names, I will create default.wbsp, validate.wbsp, submit.wbsp, mail.wbsp, blank.html and confirm.wbsp. I will create reg.mdb for DB.
Registration Elements
The registration form will contain a user name, first name, last name, email and password. All element are required, so no element must be empty. The user name must be available, the password must be repeated to confirm the password and the email must be real.
<html>
<head>
<title>Registration Form</title>
<script type=”text/javascript”>
function loadXMLDoc(url,rezult)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.open(“GET”,url,false);
xmlhttp.send(null);
document.getElementById(rezult)[removed]=xmlhttp.responseText;
}
function Validate()
{
loadXMLDoc(‘validate.wbsp?username=’+document.getElementById(“username”).value+’&fname=’+document.getElementById(“fname”).value+’&lname=’+document.getElementById(“lname”).value+’&password=’+document.getElementById(“password”).value+’&password2=’+document.getElementById(“password2″).value+’&email=’+document.getElementById(“email”).value,’msgs’);
if(document.getElementById(‘msgs’)[removed]==”"){
loadXMLDoc(‘submit.wbsp?wbf_username=’+document.getElementById(“username”).value+’&wbf_fname=’+document.getElementById(“fname”).value+’&wbf_lname=’+document.getElementById(“lname”).value+’&wbf_password=’+document.getElementById(“password”).value+’&wbf_email=’+document.getElementById(“email”).value,’msgs’);
}
}
</script>
</head>
<body>
<div id=”msgs”></div>
<fieldset><legend>Enter your information in the form below.</legend><br />
Username:<br />
<input type=”text” name=”username” id=”username” size=”40″ maxlength=”60″ /><br /><br />
First Name:<br/>
<input type=”text” name=”fname” id=”fname” size=”40″ maxlength=”60″ /><br /><br />
Last Name:<br/>
<input type=”text” name=”lname” id=”lname” size=”40″ maxlength=”60″/><br /><br />
Password:<br />
<input type=”password” name=”password” id=”password” size=”40″ maxlength=”60″/><br /><br />
Confirm Your Password:<br />
<input type=”password” name=”password2″ id=”password2″ size=”40″ maxlength=”60″/><br /><br />
E-Mail:<br />
<input type=”text” name=”email” id=”email” size=”40″ maxlength=”60″/><br /><br />
</fieldset>
<div align=”center”>
<input type=”button” value=”Submit” onclick=”Validate();” /></div>
</body>
</html>
Let me know explain this HTML and JS code. The HTML code have the basic elements of the registration, I have input text fields to insert data need for the the registration with two password fields for the password, the second is for confirmation. Finally I have a submit button and a div for viewing system messages.
The JS code have two functions, one is the AJAX JS function, the other is the validate function which I call when I submit the form.
You will notice I am calling AJAX for two reasons, one is for validating the data in the form, the second is for saving the data in the DB.
Validation process
I will create a file for validating form data and will name it as “validate.wbsp”. In this script I need to validate data, if there is errors I must display an error message, if not keep the output empty. The output will be returned by AJAX and displayed in messages div.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=Q
wb_query=username=”$wbv{username}”
wb_maxrec=1
[MsgAndLbl]
WBM_NoMatch=$wbsetv{msg|}
<!–WB_BeginTemplate–>$wbif["$wbp[rc]“=1|$wbsetv[msg|The username is not available, plase choose another!<br />]|]$wbif["$wbv[username]“=”"|$wbsetv[msg|$wbgetv[msg]Please write your username!<br />]|]$wbif["$wbv[fname]“=”"|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]$wbif["$wbv[lname]“=”"|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]$wbsplit[$wbv[email]|email_array|@|F]$wbsplit[$wbgetv[email_array(1)]|domain|.|F]$wbif["$wbv[password]“=”"|$wbsetv[msg|$wbgetv[msg]Please insert a password!<br />]|]$wbif["$wbv[password]“<>”$wbv[password2]“|$wbsetv[msg|$wbgetv[msg]Your passwords do not match!<br />]|]$wbif[($wbcstr[$wbv[email]|@]=1) and ($wblen[$wbgetv[email_array(0)]]>0) and ($wblen[$wbgetv[email_array(1)]]>0) and ($wblen[$wbgetv[domain(0)]]>0) and (($wblen[$wbgetv[domain(1)]]>1) and ($wblen[$wbgetv[domain(1)]]<5))||$wbsetv[msg|$wbgetv[msg]Please insert a valid email address<br />]]$wbgetv[msg]
WhizBase do not recognize lines, it’s code is directly ebeded in HTML, so any extra white space or break will show in the HTML, so I have removed all white spaces and breaks I do not need.
Let us go through the code step by step.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=Q
wb_query=username=”$wbv{username}”
wb_maxrec=1
[MsgAndLbl]
WBM_NoMatch=$wbsetv{msg|}
<!–WB_BeginTemplate–>
Here I am connecting to my DB Access file with the record set (table) profile, making a Query command and giving a where clause option username=”$wbv{username}”, where $wbv{username} will show the parameter I sent by AJAX by get or post method. For WhizBase get and post are the same.
I am limiting the records with 1 maximum, because I just want to check if the username already exists in the DB. If there is no records I will set the msg variable empty, I will need this variable later in the code. WBM_NoMatch gives “No Matching records” message by default, I do not want that, so I am just setting a variable.
$wbif["$wbp[rc]“=1|$wbsetv[msg|The username is not available, plase choose another!<br />]|]
If the query above returns data I will give an error message that the username is not available, I am saving the message in the msg variable. I m using an if statement and check if $wbp[rc] which returns the number of records are equal to one.
$wbif["$wbv[username]“=”"|$wbsetv[msg|$wbgetv[msg]Please write your username!<br />]|]
In case the username is empty I give an error message to write the username. When I assign the message to the variable I must not forget the messages we have from before, so I use wbgetv in wbsetv to add the past ones also.
$wbif["$wbv[fname]“=”"|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]
$wbif["$wbv[lname]“=”"|$wbsetv[msg|$wbgetv[msg]Please write your first name!<br />]|]
$wbif["$wbv[password]“=”"|$wbsetv[msg|$wbgetv[msg]Please insert a password!<br />]|]
The same process as before I do for the first name, the last name and the password.
$wbif["$wbv[password]“<>”$wbv[password2]“|$wbsetv[msg|$wbgetv[msg]Your passwords do not match!<br />]|]
If the passwords do not match, it is also an error. WhizBase uses <> for not equal. If you put != it will provoke a syntax error.
$wbsplit[$wbv[email]|email_array|@|F]
$wbsplit[$wbgetv[email_array(1)]|domain|.|F]
$wbif[($wbcstr[$wbv[email]|@]=1) and ($wblen[$wbgetv[email_array(0)]]>0) and ($wblen[$wbgetv[email_array(1)]]>0) and ($wblen[$wbgetv[domain(0)]]>0) and (($wblen[$wbgetv[domain(1)]]>1) and ($wblen[$wbgetv[domain(1)]]<5))||$wbsetv[msg|$wbgetv[msg]Please insert a valid email address<br />]]
Checking the email if it is valid is a little more complicated process, I need to check if has @ sign. If it has at least one character before and after the @ sign. If the domain name part before the dot has at least one character, and the TLD part is at least 2 characters but not more than four.
$wbgetv[msg]
Finally I display the error messages I have collected, if no error messages are provoked I will have an empty variable. This data is showed by AJAX in my messages div.
The Database
Before I go with the submitting data process, I need to show you the DB I have created. It is one DB containing one table called profile. Profile contains seven fields. The id is auto-incremental field. The confirm field is a number type field with zero default value. The rest fields (username, fname, lname, password, email) are text type fields. I am saving the DB as “reg.mdb” access file.
Submitting the data
The submitting part is not just saving data to the DB, it is calling the email file to send a confirmation request email.
Before I come here, in JS I am passing the parameters in the URL a little bit different than before. I am putting wbf_ prefix for every parameterI want to add to the DB. WhizBase takes them automatically and filter them, then adds them in the location we specify.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=A
<!–WB_BeginTemplate–>$wbgeturl[mail.wbsp?id=$wbf[id]&email=$wbf[email]]You will recieve a confirmation email to finish the registration process.
This code will save the data in reg.mdb DB, in profile table using Add command. I will use wbgeturl function to call the email sending file, I am passing the id and the email of the last inserted data. By $wbf I can get the data inserted by this operation.
I am returning to AJAX the message “You will recieve a confirmation email to finish the registration process.”.
By this I have data in the DB, but it is still not confirmed. I have created a confirm field in the DB which has by default a zero value.
Sending email
Sending an email in WhizBase is very easy, it supports HTML by default, anything I write in this file after the “<!–WB_BeginTemplate–>” code, will be shown in the email. So I must be careful what I am writing.
[FormFields]
WB_Command=P
WB_From=admin@yourdomain.com
WB_Redirect=blank.html
WB_Subject=Please confirm your registration
wb_mailserver=mail.yourdomain.com
WB_To=$wbv{email}
<!–WB_BeginTemplate–>Please click <a href=”http://www.yourdomain.com/confirm.wbsp?wbf_id=$wbv[id]“>here</a> to confirm your registration.
The command P is for sending custom email. I specify from who I am sending, from which mail server to whom email and the subject of the email. After the “<!–WB_BeginTemplate–>” code I write everything I want to show in the email, which is also a link to the confirmation page, with the id of the profile I saved.
I am calling this file by wbgeturl function, which will show me the data returned from the file called. So I need to return nothing by redirecting the page I am calling to blank.html. Which is a blank file. The redirect in WhizBase is made on the server side, so I do not get the message of the email, but the blank page.
Confirmation process
When the guest makes a registration he will receive my email for confirmation, the link to the confirmation must be clicked, which will call my file for confirmation.
[FormFields]
wb_basename=reg.mdb
wb_rcdset=profile
WB_Command=U
WB_UID=id
WB_FORCED=wbf_confirm=1
<!–WB_BeginTemplate–>Now you can login to the system!
The confirmation will update the DB, and put value 1 in the field confirm for the specified profile. Updating the DB is simple, I specify the DB name, the recordset (table) name, the U command for update, I specify which field is the unique identifier for this process. In our case it is ID. And I will force one parameter as it is sent with the URL call, it is wbf_confirm = 1.
Finally I tell the guest that he become s a user. In the next article I will show you how to make a Login in WhizBase code.
About the Author
For more information email me at: NurAzije [at] Gmail [dot] com
Or visit WhizBase official site at www.whizbase.com
NurAzije is a PHP and WhizBase programmer, who at the time of article publication is working in partnership with WhizBase on several projects.
|
|
JDSU Validator-NT Ethernet Speed Certifier and Active Network Cable Analyzer $1296.99 1 Year 1 x F Connector 1 x F Connector Remote 1 x RJ-11 Phone 1 x RJ-11 Phone Remote 1 x RJ-45 Data 1 x Serial 1 x USB 1500 ft 2 x Banana Jack 2 x Banana Jack Remote 5.59″ x 4.41″ x 1.73″ – Remote Unit 9″ x 4.49″ x 2.09″ – Main Unit Validator-NT Validator-NT Remote Validator-NT Carrying Case Plan-Umd Software Cable Labels Compact Flash Card 2 x Lithium-ion Rechargeable Batteries 2 x AC Adapter 2 x 72″ USB Cable Assembly 2 x 12″ Shielded RJ45 Connectors Cable Assemblies 2 x 7.5″ No FaultRJ12 Connectors for RJ11 or RJ45 Cable Assemblies 2 x 24″ RJ45 with 8 Alligator Clips Cable Assemblies 2 x BNC Plug to F Jack Adapters 2 x Sacrificial Cables for Extending Modular Plug 8 x Wiremap Remotes Verify proper operation of Ethernet cable runs Certify speed capability of cable runs to support 10/100/1000 Mb/s Ethernet applications Ensure configuration of and connectivity with active network devices Document network topology including moves, adds, and changes Conducts Bit Error Rate (BER) testing to speed certify Ethernet data transmission speed up to 1000BASE-T (1 Gb/s) Measures Signal-to-Noise Ratio and Skew to uncover impairments to Ethernet data transmission Tests for opens, shorts, split pairs, miswires, and reversals and measures distance to opens and shorts supports all network, telco, and coax cables Identifies cable termination on active Ethernet ports with hub flash The Validator-NT includes a comprehensive set of features to test the active network capabilities of a network: port discovery for speed and capability detection of active devices up to 1 Gb/s; ping test to verify connectivity to IP hosts on or off the local network; and discovery of network devices using Cisco Delivery Protocol (CDP). Cable Analyzer CompactFlash (CF) Card JDS Uniphase Corporation JDSU NT955 Rechargeable Lithium Ion (Li-Ion) Removable STP UTP Validator Validator-NT Ethernet Speed Certifier and Active Network Cable Analyzer www.jdsu.com |
|
|
Professional JavaScript for Web Developers $30.48 A significant update to a bestselling JavaScript book As the key scripting language for the web, JavaScript is supported by every modern web browser and allows developers to create client-side scripts that take advantage of features such as animating the canvas tag and enabling client-side storage and application caches. After an in-depth introduction to the JavaScript language, this updated edition of a bestseller progresses to break down how JavaScript is applied for web development using the latest web development technologies. Veteran author and JavaScript guru Nicholas Zakas shows how JavaScript works with the new HTML5 as well as other significant advances in web development as it relates to JavaScript.Begins with an introduction to JavaScript basics and then moves on to more advanced topics regarding JavaScript and advances in web development technologiesDescribes how JavaScript is implemented into HTML5Covers browser/feature detection in scripts, event-driven JavaScript development, error reporting and debugging, offline application and data storage, and more "Professional JavaScript for Web Developers, 3rd Edition" is an authoritative JavaScript resource that every web developers should have. |
|
|
Essential JavaScript for Web Professionals $10.48 – Fully updated and expanded coverage of programming with JavaScript. — Provides real-world projects and solutions. — Covers key topics including browser detection, effective debugging techniques, and use of CSS and layers. Enhance your Web site functionality with JavaScript Essential JavaScript for Web Professionals provides the reader with practical projects and realistic solutions. This real-world approach to JavaScript engages the reader, as more complex projects build on simpler problems from earlier in the book. Projects include rollovers, pulldown menus, and navigation tools. More complex problems include error handling, logins, creating pages on the fly from data held in multidimensional arrays, and more. |
|
|
JavaScript Bible [With CDROM] $20.39 The bestselling JavaScript reference-now updated to reflect changes in technology As the most comprehensive book on the market, the JavaScript Bible is a classic bestseller that keeps you up to date on the latest changes in JavaScript, the leading technology for incorporating interactivity into Web pages. Part tutorial, part reference, this book serves as both a learning tool for building new JavaScript skills as well as a detailed reference for the more experienced JavaScript user. You’ll get up to date coverage on the latest JavaScript practices that have been implemented since the previous edition, as well as the most updated code listings that reflect new concepts and you’ll learn how to apply the latest JavaScript exception handling and custom object techniques. Follows in the tradition of previous edition bestsellers and provides you with a thorough reference on JavaScript, the leading technology for making Web pages interactive Serves as a reference and tutorial and is packed with numerous working code examples Discusses the advances in JavaScript programming such as JavaScript subroutine libraries Shows how to write scripts for mouse rollover effects Reviews deployment strategies that best suit your content goals and target audience Practical examples of working code round out this new edition and contribute to helping you learn JavaScript quickly yet thoroughly. |
|
|
VALIDATOR-NT W/ OUT-AC CBLS $1284.99 VALIDATOR-NT W/ OUT-AC CBLS |
|
|
JavaScript Application Cookbook $58.98 There is a serious information gap for Webmasters learning client-side JavaScript skills and trying to solve common Web-related problems. Knowing the syntax is one thing, being able to build a useful application is another. And while there are dozens of "how- to" JavaScript books available, few literally hand the Webmaster a set of ready-to-go, client-side JavaScript applications with thorough documentation that enable the reader to fully understand and extend those applications. By providing such a set of applications, "JavaScript Application Cookbook" allows Webmasters to immediately add extra functionality to their Web sites. This book targets readers with two different skill sets. The primary target is JavaScript-knowledgeable Webmasters and designers who can immediately begin constructing their own versions of the applications. The secondary target is those with little or no JavaScript experience. The included applications are ready for immediate use and require little customization. This book explores both the code and the techniques that are centered around core JavaScript functionality, a functionality that will not become incompatible or obsolete. The source file design of most applications and libraries will help modularize reader Web sites and facilitate easier site management and coding practices. Chapters are organized by application. Among the included applications are: A client-side search engine that will show coders how to build their own search engine and get excellent results, all with a client-side tool A drag-and-drop greeting application that lets users custom build and send DHTML email greetings A GUI image rollover tool that generatescross-browser image rollover code for all versions of JavaScript A robust client-side shopping cart application that lets shoppers browse and shop, while the application keeps a tab of the shopper’s selections and a running bill, including tax and shipping An online test application that auto-administers, grades, and displays answers to online exams or surveys An additional value to this book is an online resource (http: //www.serve.com/hotsyte/) that discusses the applications and points to other resources. With its focus on providing practical real-world solutions for Webmasters, "JavaScript Application Cookbook" is destined to become a staple for every JavaScript developer, regardless of experience. |
|
|
Going Global with JavaScript and Globalize.Js $43.14 A hands-on guide for taking JavaScript applications global.As developers expand JavaScript applications to serve users around the world, problems typically arise regarding the best way to handle new languages, locales, dates, and measurements.This book is designed to help. "Going Global with JavaScript and Globalize.js" is unique in its focus on globalization, internationalization, and localization issues.The book helps make JavaScript applications world-ready and easily adapted to different human languages, notational conventions, and user interface preferences. The solutions and methods included range from simple programming constructs to elaborate techniques that use available information for hundreds of human languages, such as the Common Locale Data Repository (CLDR). There is a special focus on the emerging Globalize.js library, which provides data sets for more than 300 cultures, as well as the ability to develop custom cultures. The techniques included in this book, which are not readily found elsewhere, are easy to learn and apply. |
|
|
Beginning Javascript (Paperback) $23.26 Beginning JavaScript 4th edition continues the excellent and tradition of the first three editions, which combined have sold more than 60,000 copies, with more than 75 Amazon reviews. This edition improves on the first and second editions in several ways: More coverage of Ajax and remote scripting - which is driving tremendous renewed JavaScript interest Trimming "fat" from the book by removing some peripheral and dated coverage of ASP, databases, and older browser versions Updating all the code to insure compliance with the most recent popular web brosers including IE, Firefox and Safari. Improved examples throughout the book to use more up-to-date and relevant programming techniques Reorganization of chapters to help streamline learning of related topics and to better integrate new topics. The major topics covered in the book are: Data Types and Variables; Decisions, Loops, and Functions; JavaScript – An Object Based Language; Programming the browser; HTML Forms: Interacting with the User; Windows and Frames; String Manipulation; Date, Time and Timers; Common Mistakes, Debugging, and Error Handling; Storing Information: Cookies; Using ActiveX and Plug-ins with JavaScript Introduction To Dynamic HTML as it applies to the latest web browsers JavaScript and XML Ajax for Remote Scripting New coverage of popular JavaScript Frameworks. |
Write a comment: