Application of ECMAScript String Regular Expressions
ECMAScript String Regular Expressions – Part 9
Forward: In this part of the series, we look at the application of ECMAScript String Regular Expressions.
By: Chrysanthus Date Published: 26 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Validating HTML Input Controls
Today, HTNL has certain controls that automatically do validation at the client. These controls are the email and the URL controls. The validation is done by the browser automatically. HTML now has the Boolean required attribute, which you can use for input text controls. With the required attribute the control must not be empty. The tel and the plain text (e.g. for first name) controls do not have any automatic validation. The only automatic validation you can make any of them have is to give it a required attribute. If you want any other validation for a control, then you have to code it yourself, for the control, using ECMAScript String.
Validating an ID at the Client
You may have a form web page were the user has to type an ID, say an ID for a database table. Such an ID would be typed in the input plain text control. You will need to code the validation yourself. Let us look at an example.
Consider a simple ID code, which begins with an alphabet and then it can have any number of digits. Examples of such IDs are: P1, P22, P3, F456. When the user types an ID, the validation code has to check if the first character if an alphabet followed by any number of digits. This is simple to achieve read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function validate()
{
re = /[a-zA-Z]\d+/;
subject = document.getElementById('T1').value;
if (subject.search(re) != -1)
return true;
else
{
alert("The ID typed is wrong!");
return false;
}
}
</script>
</head>
<body>
<form method = "post" action = "http://www.somewebsite.com/cgi-bin/file.exe" onsubmit = "return validate()">
<p><label>ID: <input type="text" name="ident" id="T1"></label></p>
<button type=”submit”>Send</button>
</form>
</body>
</html>
You can also use ECMAScript String Regular Expression Techniques to find a phrase in an HTML document and highlight the phrase. You need knowledge of the DOM for this. Read and try the following code, which finds and highlights the phrase you type into the prompt box. After displaying the document, click the button, first.
<!DOCTYPE HTML>
<html>
<head>
<title>Illustration</title>
<script type="text/ECMAScript">
function findRepl()
{
phrase = window.prompt("Type the Search Phrase","James Bond");
if (phrase != null)
{
re = eval("/" + phrase + "/");
subject = document.getElementById('B1').innerHTML;
replacement = "<mark>" + phrase + "</mark>";
str = subject.replace(re, replacement);
document.getElementById('B1').innerHTML = str;
}
}
</script>
</head>
<body id="B1">
<p>text text text</p>
<button type=”button” onclick="findRepl()">Click</button>
<p>The film series titled, "James Bond", is the most popular series.</p>
</body>
</html>
That is it for this part of the series. We stop here and continue in the next part.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course