How to check whether a TextBox has value or not using JavaScript

Using JavaScript we can perform client side validation. It will improve the performance of your web application. Here i have shown a simple basic validation, how to check whether a text box has value or not.

    var username=document.getElementById("uname").value;  
    if (username==null || username=="")  
    {  
        alert("Please Enter Username");  
        document.getElementById("uname").focus();  
    }  

Here the alert is used to display a message box with the text it has. And the focus() is used to move the cursor to the corresponding text box.

Sample HTML5 Validations

Some HTML5 validation samples are here. You can use it in your project.

• Limit the character count in text box. Here it's uses pattern attribute that is used to provide the Regular expression validation. So the ".{4,4}" is a regular expression that's allows only 4 character.

<input type="text" pattern=".{4,4}" name="username" id="username" value=""/>

• Allow only numbers in text box. Here it's uses pattern attribute that is used to provide the Regular expression validation. So the "\d*" is a regular expression that's represents decimal.

<input type="text" pattern="\d*" name="phonenumber" id="phonenumber" value="" />

• Required field validation for drop down list. If the selected field has no value means the validation will be triggered. In the below sample the "Select" field has empty value in the "value" attribute.

<select id="grade" name="grade"  required>
<option value="">Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

• Email validation. The following code has the type="email". So it will allow only email.

<input type="email" name="email" id="email" value="">

• Required field validation for text box. The following code has "required" attribute. That is used to provide this validation,

<input type="text" name="firstname" id="firstname" value="" required/>

Create a Tab control using JQuery in ASP.NET

By using the below code we can make a simple JQuery tab control. In this example i am going to create two tab. When we click a tab a table will be hide and another table will be visible.

• Befor start coding download and add latest JQuery library and refer it in code like below inside head section.

<script src='js/common/jquery-1.9.1.js' ></script>

•  Then add the below JQuery code inside head section in ASP.NET HTML design page

<script type="text/javascript">
    $(document).ready(function () {
        $(".tabLink").each(function () {
            $(this).click(function () {
                tabeId = $(this).attr('id');
                $(".tabLink").removeClass("activeLink");
                $(this).addClass("activeLink");
                $(".tabcontent").addClass("hide");
                $("#" + tabeId + "-1").removeClass("hide")
                return false;
            });
        });
    });
 </script>

• Then add the below code in body section. This is actually a tab design.

<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="contact_tab_box">
        <a href="javascript:;" class="tabLink activeLink" id="tab1">Tab1</a>
        <a href="javascript:;" class="tabLink " id="cont-2">Tab2</a>
        </td>
    </tr>
</table>

• Now we have to design two tables to work with the tab when we click it

<table width="100%" class="tabcontent" id="t1">
    <tr>
        <td>
        DO YOUR DESIGN HERE
        </td>
    </tr>
</table>


<table width="100%" class="tabcontent hide" id="t2">
    <tr>
        <td>
        DO YOUR DESIGN HERE
        </td>
    </tr>
</table>

• We need the below CSS for better design

.contact_tab_bar_left {
    background: #F2F2F2;
}

.contact_tab_bar_right {

    background: #F2F2F2;
    border-radius:0px 6px 6px 0px;
}

.contact_tab_box {
    background: #EEEEEE;
}

.contact_tab_box a {
    font-family:Arial;
    font-size:14px;
    border:1px solid #797979;
    color:#000;

    padding: 7px 30px;
    text-decoration:none;
    background-color: #eee;
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
}

.contact_tab_box a.activeLink {
    font-family:Arial;
    font-size:14px;
    font-weight: bold;
    background-color: #3F3F3F;
    color:#FFFFFF;
    border-bottom: 0;
    padding: 7px 30px;
    border-radius: 6px 6px 0px 0px;
    -moz-border-radius: 6px 6px 0px 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
}

.contact_tab_content {
    border: 1px solid #797979;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
.hide { display: none;}