It is need of some clients that user cannot enter any special character(# @ $ % ^ & *) in text field. E.g. in the place of first name, last name etc. So it is very easy to do so just copy and past the code below and see the fun.
Don't forget to include jquery file. You can download latest jquery file from this link http://blog.jquery.com/2012/11/13/jquery-1-8-3-released/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form validation on keyup using jquery very easy (www.b2atutorials.blogspot.com)</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery('#firstname').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters.'); return ''; });
if($(this).val().length > 40)
{
alert('Not allowed more than 40 characters');
$(this).val($(this).val().substring(0, 40));
}
});
jQuery('#lastname').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters.'); return ''; });
if($(this).val().length > 40)
{
alert('Not allowed more than 40 characters');
$(this).val($(this).val().substring(0, 40));
}
});
jQuery('#b_address').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z_0-9 ]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and Numbers.'); return ''; });
if($(this).val().length > 30)
{
alert('Not allowed more than 40 characters');
$(this).val($(this).val().substring(0, 30));
}
});
jQuery('#b_address_2').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z_0-9 ]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and Numbers.'); return ''; });
if($(this).val().length > 30)
{
alert('Not allowed more than 40 characters');
$(this).val($(this).val().substring(0, 30));
}
});
jQuery('#b_zipcode').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z_0-9 ]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and Numbers.'); return ''; });
if($(this).val().length > 10)
{
alert('Not allowed more than 10 characters');
$(this).val($(this).val().substring(0, 10));
}
});
jQuery('#b_city').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters.'); return ''; });
if($(this).val().length > 40)
{
alert('Not allowed more than 40 characters');
$(this).val($(this).val().substring(0, 40));
}
});
jQuery('#phone').keyup(function () {
this.value = this.value.replace(/[^0-9]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only Numbers.'); return ''; });
if($(this).val().length > 20)
{
alert('Not allowed more than 20 characters');
$(this).val($(this).val().substring(0, 20));
}
});
jQuery('#email').keyup(function () {
this.value = this.value.replace(/[^\w\.+@a-zA-Z_+?\.a-zA-Z\.]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and Numbers.'); return ''; });
if($(this).val().length > 50)
{
alert('Not allowed more than 50 characters');
$(this).val($(this).val().substring(0, 50));
}
});
jQuery('#subject').keyup(function () {
this.value = this.value.replace(/[^a-zA-Z_0-9 ]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and Numbers.'); return ''; });
if($(this).val().length > 30)
{
alert('Not allowed more than 40 characters');
$(this).val($(this).val().substring(0, 30));
}
});
});
</script>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-bottom:5px;">
<tbody><tr>
<td width="18px"></td>
<td valign="top"></td>
<td width="18px"></td>
</tr>
<tr>
<td></td>
<td style="padding-top:15px;">
<form name="registerform" id="insertform" method="post" action="contact_us.php">
<table width="100%" cellspacing="0" cellpadding="2">
<tbody>
<tr valign="middle">
<td class="FormButton">Title</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<select name="title" id="title">
<option value="Mr.">Mr.</option>
<option value="Miss">Miss</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
</select>
</td>
</tr>
<tr valign="middle">
<td class="FormButton">First name</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="32" size="32" name="firstname" id="firstname">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Last name</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="32" size="32" name="lastname" id="lastname">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Address</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="64" size="32" name="b_address" id="b_address">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Address (line 2)</td>
<td></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="64" size="32" name="b_address_2" id="b_address_2">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">City</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="64" size="32" name="b_city" id="b_city">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Zip/Postal code</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" onchange="javascript: check_zip_code(document.getElementById('b_country'), this);" value="" maxlength="32" size="32" name="b_zipcode" id="b_zipcode">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Phone</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="32" size="32" name="phone" id="phone">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">E-mail</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" onchange="javascript: checkEmailAddress(this);" value="" maxlength="128" size="32" name="email" id="email">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Subject</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<input type="text" value="" maxlength="128" size="32" name="subject" id="subject">
</td>
</tr>
<tr valign="middle">
<td class="FormButton">Message</td>
<td><font class="Star">*</font></td>
<td nowrap="nowrap">
<textarea name="body" rows="12" id="message_body" cols="48"></textarea>
</td>
</tr>
<tr valign="middle">
<td> </td>
<td> </td>
<td>
<br>
<table cellspacing="0" class="SimpleButton"><tbody><tr><td><input id="insert" name="submit" type="submit" value="Submit" /></td></tr></tbody></table>
</td>
</tr>
</tbody></table>
</form>
<br><br></td>
<td width="18px"></td>
</tr>
<tr>
<td width="18px"></td>
<td></td>
<td width="18px"></td>
</tr>
</tbody></table>
</body>
</html>
0 comments:
Post a Comment