Mandatory Input Field

An input field with mandatory indicator.

by nirmaljpatel

HTML

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <div class="container">
            <input id="name" placeholder="First Name" class="mandatoryInput"></input>
            <span class="star" >*</span>
        </div>
        <div class="container">
            <input id="surname" placeholder="Last Name" class="mandatoryInput"></input>
            <span class="star" >*</span>
        </div>
    </div>
</div>

CSS

.container {
    position: relative;
}
.star {
    position: absolute;
    top: 20px;
    left: 6px;
    width: 20px;
    color: red;
}
input.mandatoryInput {
    display: inline;
    width: 250px;
    padding-left: 15px;
}
input.mandatoryInput:focus + span.star,
input.mandatoryInput.notEmpty + span.star {
    display: none;
}

JavaScript

$('.mandatoryInput').on('blur', function(event){
    console.log(event.target.id +' lost focus...');
    var inpEle = '#' + event.target.id;
    if(event.target.value == '') {
        $(inpEle).removeClass("notEmpty");
    } else {
        $(inpEle).addClass("notEmpty");
    }
});