In this article I am going to show you how we can add a security when javascript is disabled in the browser options. Let’s say you have created an Enquiry form on you website, which will get some varified inputs from user & submit as email. In this form you have added all the necessary validation using javascript, so that users will get alert if some fields are missing.But what will you do if the user disables Javascript from browser options. That way anybody can submit the form without getting alerted for missing fields.
Best solution for this is to use noscript tag.
Here is how W3Schools explains “noscript” tag :
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.
The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser.
Here is how I use noscript tag in all my sites. Take a look at the following code.
<!-- Add this into Head tag --->
<style type="text/css">
#javascript_error{
display:none;
}
</style>
<noscript>
<style type="text/css">
#page{
display:none;
}
#javascript_error{
display:block;
font-size:20px;
color:red;
}
</style>
</noscript>
<!-- Add this into Body tag where you want to display your error -->
<div id="error">Please enable javascript into your browser.</div>
Here what I have done is, I have added one div block into my body to display javascript error. Default it is hidden.And in noscript tag, I have added another style to make Error block visible. And to Hide the full page container which is identified as “page” (in my sites, it depends on what id you choose for div block to wrap whole body code)
Hope this simplifies your security process.
here is a lot of learning things ..
so nice…
I try my best to share as much as possible. thanks Naveed, keep visiting
The NOSCRIPT meta tag has been used to do this for many years, and redirect if needed.
Btw this code of yours does not work.
ya, it is just a pseudo code. If you closely look at the div ID I have used in style and the one div ID I have used in HTML code, they are different. Just change div id=”error” to div id=”javascript_error” and it will work. Thanks.