Javascript Check for Illegal Characters
Websites often use JavaScript functions to validate user input. When users enter data into a Web page form, the site normally sends this data to the Web server. Rather than sending invalid data, many sites employ JavaScript functions to detect invalid input, warning the user to correct it before the data can be sent. JavaScript functions use regular expressions to check user input strings for any illegal characters.
-
Purpose
-
When a website captures user data through a Web form, this involves data being sent across the Web. Web forms can capture various types of user input including text. This text can include personal details such as contact telephone numbers, website addresses and geographical addresses. Since JavaScript runs at client side, in the user's browser, a function can iterate through the user-entered data, checking it for validity before sending it to the server. If the data is valid, the JavaScript function can instruct the browser to go ahead and send it. If not, it can output a message instructing the user to correct the data before submitting it again.
Regular Expressions
-
Regular expressions allow programmers to define sequences of text characters, including letters, numbers and symbols. By defining the characters that you consider illegal for your Web page purposes in a regular expression, you can create a function to detect these characters. The following sample code demonstrates a JavaScript regular expression:
var illegalCharacters = =/^[^@$]+$/;This regular expression indicates the ampersand and dollar sign characters. Developers need to define those characters that are illegal within their own applications. Some developers detect different characters depending on the input field involved, for example email addresses and postal codes.
-
Function
-
Once a JavaScript function has a regular expression defined, it can check user input text strings for the characters within it. The following sample code demonstrates:
//given the variable inputString
if(inputString.match(illegalCharacters)) alert("Illegal characters entered");This code would work where the function has already read the text from an input field. The code could also include an "else" clause indicating to the browser that the form can be submitted. This is a common technique, with Web forms often indicating a server side script to send data when the user submits their data.
Call
-
Web forms can indicate a script for data processing as part of their opening tag markup. The following sample code demonstrates:
<form name="userDataForm" action="process_data.php" onsubmit="return checkFormData()" method="post">The developer can place the validation code inside the function specified as the "onsubmit" event listener attribute. When the user attempts to submit the form, the function will execute. If the function returns true, this means that the data is valid and the browser will submit it to the server. If it returns false, the data contains illegal characters and will not be submitted.
-
References
Resources
- Photo Credit Photos.com/Photos.com/Getty Images