Introduction: In previous articles i explained How to Count and display remaining characters in the multiline textbox in asp.net and How to show Validation guidelines in web forms using JavaScript in Asp.net and Example to implement Jquery form validations and Show tool tip message using CSS and HTML and jQuery to Validate email address and jQuery to validate file extension and upload image file and Get Title,Description and Keywords Meta tags from URL and How to implement JavaScript validation in asp.net website.
Description: In this example I will create a registration web page. I will also apply JavaScript validation on each input box (TextBox) so that data is validated on client side. But as we all know JavaScript can be disable from the browser’s setting and all the validation applied on the webpage will get by-passed i.e. will not work.
Now the question arise how to force JavaScript to be enabled i.e. it should always run on client's browser. The answer is NO, we can’t. Because it is browser’s security issue and will not allow us to enable or disable it through code. The only way is to manually change it from the browser’s setting. So we have only one option to check whether JavaScript is enable or disabled on the client’s browser. If disabled, then show a message to enable the JavaScript from the browser’s setting.
Now disable the JavaScript from your browser setting and run the application again. It will show you the message to enable the JavaScript as shown in figure below:
Description: In this example I will create a registration web page. I will also apply JavaScript validation on each input box (TextBox) so that data is validated on client side. But as we all know JavaScript can be disable from the browser’s setting and all the validation applied on the webpage will get by-passed i.e. will not work.Now the question arise how to force JavaScript to be enabled i.e. it should always run on client's browser. The answer is NO, we can’t. Because it is browser’s security issue and will not allow us to enable or disable it through code. The only way is to manually change it from the browser’s setting. So we have only one option to check whether JavaScript is enable or disabled on the client’s browser. If disabled, then show a message to enable the JavaScript from the browser’s setting.
There is a tag <NOSCRIPT> that executes only when JavaScript is disabled on the browser. So we can use this tag to show appropriate message with instruction link to the visitors to enable JavaScript on their browser.
Implementation: Let’s create an application in asp.net to understand the concept.
Implementation: Let’s create an application in asp.net to understand the concept.
- In the <BODY> tag of the design page(.aspx) create the form as shown in first figure above:
Source Code:
<fieldset style="width:280px;">
<fieldset style="width:280px;">
<legend>Enable javaScript example in asp.net</legend>
<table>
<tr>
<td>
Username <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtuser" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Password <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtpwd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
confirm password <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtcnmpwd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
First name <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtfname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Last name <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtlname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Email Address <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Phone number <span style="color: #FF3300">*</span></td>
<td class="auto-style2">
<asp:TextBox ID="txtphone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td >
Location <span style="color: #FF3300">*</span></td>
<td>
<asp:TextBox ID="txtlocation" runat="server" Height="22px"></asp:TextBox>
</td>
</tr>
<tr>
<td >
</td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</fieldset>
- In the <HEAD> tag create a JavaScript function to validate each control on the form as:
<script language="javascript" type="text/javascript">
function validationCheck() {
var summary = "";
summary += isvaliduser();
summary += isvalidpassword();
summary += isvalidConfirmpassword();
summary += isvalidFirstname();
summary += isvalidLastname();
summary += isvalidEmail();
summary += isvalidphoneno();
summary += isvalidLocation();
if (summary != "") {
alert(summary);
return false;
}
else {
return true;
}
}
function isvaliduser() {
var id;
var temp = document.getElementById("<%=txtuser.ClientID %>");
id = temp.value;
if (id == "") {
return ("Please Enter User Name" + "\n");
}
else {
return "";
}
}
function isvalidpassword() {
var id;
var temp = document.getElementById("<%=txtpwd.ClientID %>");
id = temp.value;
if (id == "") {
return ("Please enter password" + "\n");
}
else {
return "";
}
}
function isvalidConfirmpassword() {
var uidpwd;
var uidcnmpwd;
var tempcnmpwd = document.getElementById("<%=txtcnmpwd.ClientID %>");
uidcnmpwd = tempcnmpwd.value;
var temppwd = document.getElementById("<%=txtpwd.ClientID %>");
uidpwd = temppwd.value;
if (uidcnmpwd == "" || uidcnmpwd != uidpwd) {
return ("Please check and re-enter password to confrim" + "\n");
}
else {
return "";
}
}
function isvalidFirstname() {
var id;
var temp = document.getElementById("<%=txtfname.ClientID %>");
id = temp.value;
if (id == "") {
return ("Please enter first name" + "\n");
}
else {
return "";
}
}
function isvalidLastname() {
var id;
var temp = document.getElementById("<%=txtlname.ClientID %>");
id = temp.value;
if (id == "") {
return ("Please enter last name" + "\n");
}
else {
return "";
}
}
function isvalidEmail() {
var id;
var temp = document.getElementById("<%=txtEmail.ClientID %>");
id = temp.value;
var re = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (id == "") {
return ("Please Enter Email" + "\n");
}
else if (re.test(id)) {
return "";
}
else {
return ("Email should be in the form abc@xyz.com" + "\n");
}
}
function isvalidphoneno() {
var id;
var temp = document.getElementById("<%=txtphone.ClientID %>");
id = temp.value;
var re;
re = /^[0-9]+$/;
var digits = /\d(10)/;
if (id == "") {
return ("Please enter phone no" + "\n");
}
else if (re.test(id)) {
return "";
}
else {
return ("Phone no should be digits only" + "\n");
}
}
function isvalidLocation() {
var id;
var temp = document.getElementById("<%=txtlocation.ClientID %>");
id = temp.value;
if (id == "") {
return ("Please enter Location" + "\n");
}
else {
return "";
}
}
</script>
- Now run the application. Click on submit button without entering anything or entering wrong data, It will show you validation failure message as shown in figure below:
But if the client i.e. user/visitor has disabled the JavaScript from his browser setting then on clicking Submit button it will not shown any validation failure message. So we have to use <NOSCRIPT> tag.
- So place the following tag also in the <HEAD> tag.
<noscript> <h3 style="color: #FF3300;">
Javascript is not currently enabled in your browser.<br /> You must <a href="http://support.google.com/bin/answer.py?hl=en&answer=23852" target="_blank" >enable Javascript </a> to run this web page correctly.
</h3></noscript>
- Now it’s time to call the JavaScript function created for checking validation.
C#.Net Code to force javascript to be enabled
So in the code behind file (.aspx.cs) call the JavaScript function on the page load event as:
protected void Page_Load(object sender, EventArgs e)
{
btnsubmit.Attributes.Add("onclick", "javascript:return validationCheck()");
}
VB.Net Code to force javascript to be enabled
In the code behind file (.aspx.vb) call the JavaScript function on the page load event as:
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
btnsubmit.Attributes.Add("onclick", "javascript:return validationCheck()")
End Sub
Now disable the JavaScript from your browser setting and run the application again. It will show you the message to enable the JavaScript as shown in figure below:
Now over to you:
"If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates."
2 comments
Click here for commentsIf you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..