Code for showing Attractive Validation hints and Alert Message using JavaScript

In this blog i am going to show how to alert users with message in a very attractive way while entering values in textbox areas (i.e. Validation Hint) and how to get values from HTML controls and show those values in alert message through JavaScript.

      Validation Hints is a simple script that aides in form validation. It makes sure that password and username fields are the specified length, and can even validate against regular expressions. Small and handy.

  • First of add all the functions and the CSS code given below inside the <head> tag ::


  <style type="text/css">
form {
width:500px;
border:1px solid #ccc;
}
fieldset {
border:0;
padding:10px;
margin:10px;
position:relative;
}
label {
display:block;
font:normal 12px/17px verdana;
}
input {width:160px;}


span.hint {
font:normal 11px/14px verdana;
background:#eee url(images/bg-span-hint-gray.gif) no-repeat top left;
color:#444;
border:1px solid #888;
padding:5px 5px 5px 40px;
width:250px;
position:absolute;
margin: -12px 0 0 14px;
display:none;
}


fieldset.welldone span.hint {
background:#9fd680 url(images/bg-span-hint-welldone.jpg) no-repeat top left;
border-color:#749e5c;
color:#000;
}
fieldset.kindagood span.hint {
background:#ffffcc url(images/bg-span-hint-kindagood.jpg) no-repeat top left;
border-color:#cc9933;
}


fieldset.welldone {
background:transparent url(images/bg-fieldset-welldone.gif) no-repeat 194px 19px;
}
fieldset.kindagood {
background:transparent url(images/bg-fieldset-kindagood.gif) no-repeat 194px 19px;
}


</style>

<script type="text/javascript">

    // This function checks if the username field
    // is at least 6 characters long.
    // If so, it attaches class="welldone" to the 
    // containing fieldset.

    function checkUsernameForLength(whatYouTyped) {
        var fieldset = whatYouTyped.parentNode;
        var txt = whatYouTyped.value;
        if (txt.length > 5) {
            fieldset.className = "welldone";
        }
        else {
            fieldset.className = "";
        }
    }





    // If the password is at least 4 characters long, the containing 
    // fieldset is assigned class="kindagood".
    // If it's at least 8 characters long, the containing
    // fieldset is assigned class="welldone", to give the user
    // the indication that they've selected a harder-to-crack
    // password.

    function checkPassword(whatYouTyped) {
        var fieldset = whatYouTyped.parentNode;
        var txt = whatYouTyped.value;
        if (txt.length > 3 && txt.length < 8) {
            fieldset.className = "kindagood";
        } else if (txt.length > 7) {
            fieldset.className = "welldone";
        } else {
            fieldset.className = "";
        }
    }

    // This function checks the email address to be sure
    // it follows a certain pattern:
    // blah@blah.blah
    // If so, it assigns class="welldone" to the containing
    // fieldset.

    function checkEmail(whatYouTyped) {
        var fieldset = whatYouTyped.parentNode;
        var txt = whatYouTyped.value;
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(txt)) {
            fieldset.className = "welldone";
        } else {
            fieldset.className = "";
        }
    }




    // this part is for the form field hints to display
    // only on the condition that the text input has focus.
    // otherwise, it stays hidden.

    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }


    function prepareInputsForHints() {
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].onfocus = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
            }
            inputs[i].onblur = function () {
                this.parentNode.getElementsByTagName("span")[0].style.display = "none";
            }
        }
    }
    addLoadEvent(prepareInputsForHints);

    function getValues() {
        var name = document.getElementById('Text1').value;
        var email = document.getElementById('Text2').value;
        alert("User Name : "+ name +"\n"+"Email ID : "+ email);
    }

</script>


  • Now add the following code inside <body> tag ::


<form id="basicform" runat="server">
    <div>
    <fieldset> 
<label for="username">Choose a Username:</label>
<input
type="text"
id="Text1"
onkeyup="checkUsernameForLength(this);" />
<span class="hint">Usernames must be a least 6 characters in length.</span>
</fieldset>

<fieldset>
<label for="password">Enter a password:</label>
<input
type="password"
id="password1"
onkeyup="checkPassword(this);" />
<span class="hint">The password can be any combination of characters, and must be at least 4 characters in length.  8 characters recommended!</span>
</fieldset>

<fieldset>
<label for="email">Enter your email address:</label>
<input
type="text"
id="Text2"
onkeyup="checkEmail(this);" />
<span class="hint">You can enter your real address without worry - we don't spam!</span>
</fieldset>
<fieldset>
    <asp:Button ID="Button1" runat="server" Text="Get Value" OnClientClick="getValues()" /></fieldset>
    </div>
    </form>
The video attached shows the Output how result willl look like ::



Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image