In View :
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Employee</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h3>Add Employee</h3>
<div class="container">
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Last Name</div>
<div class="col-md-3">
<input type="text" id="txtLastName" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errLastName">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">First Name</div>
<div class="col-md-3">
<input type="text" id="txtFirstName" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errFirstName">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Title</div>
<div class="col-md-3">
<select id="drpTitle" class="form-control">
<option>Select Title</option>
<option>Option 01</option>
</select>
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errTitle">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Title of Courtesy</div>
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="optradio">Option 1</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 2</label>
<label class="radio-inline">
<input type="radio" name="optradio">Option 3</label>
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errTOC">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Language</div>
<div class="col-md-3">
<label class="checkbox-inline">
<input type="checkbox" name="chkLanguage" value="English">English</label>
<label class="checkbox-inline">
<input type="checkbox" name="chkLanguage" value="Hindi">Hindi</label>
<label class="checkbox-inline">
<input type="checkbox" name="chkLanguage" value="Urdu">Urdu</label>
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errLanguage">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">DOB</div>
<div class="col-md-3">
<input type="text" id="txtDOB" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errDOB">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">DOJ</div>
<div class="col-md-3">
<input type="text" id="txtDOJ" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errDOJ">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Salary</div>
<div class="col-md-3">
<input type="text" id="txtSalary" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errSalary">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3">Email</div>
<div class="col-md-3">
<input type="text" id="txtEmail" class="form-control" />
</div>
<div class="col-md-6">
<div class="text-danger hidden" id="errEmail">
<strong>Required</strong>
</div>
</div>
</div>
<div class="clear-fix"> </div>
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-3">
<input type="button" id="btnSave" class="btn btn-primary" value="Save" />
</div>
<div class="col-md-6">
</div>
</div>
<div class="clear-fix"> </div>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
@*<link rel="stylesheet" href="/resources/demos/style.css">*@
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#txtDOB").datepicker({ maxDate: '0' });
$("#txtDOJ").datepicker({ minDate: '0' });
$("#txtLastName").keypress(function () {
if ($("#txtLastName").length > 0)
$("#errLastName").addClass("hidden");
});
$("#txtFirstName").keypress(function () {
if ($("#txtFirstName").length > 0)
$("#errFirstName").addClass("hidden");
});
$("#drpTitle").change(function () {
if ($("#drpTitle option:selected").text() != "Select Title") {
$("#errTitle").addClass("hidden");
}
});
$('[name="optradio"]').change(function () {
if ($('[name="optradio"]:checked').length > 0)
$("#errTOC").addClass("hidden");
});
$('[name="chkLanguage"]').change(function () {
if ($('[name="chkLanguage"]:checked').length > 0)
$("#errLanguage").addClass("hidden");
});
$("#txtDOB").change(function () {
if ($("#txtDOB").length > 0)
$("#errDOB").addClass("hidden");
});
$("#txtDOJ").change(function () {
if ($("#txtDOJ").length > 0)
$("#errDOJ").addClass("hidden");
});
$("#txtSalary").keyup(function () {
if ($("#txtSalary").val() < 10000 || $("#txtSalary").val() > 40000)
$("#errSalary").html("<strong>Salary should be between 10000 and 40000.</strong>").removeClass("hidden");
else if ($("#txtSalary").val() > 10000 && $("#txtSalary").val() < 40000)
$("#errSalary").html("<strong>Required</strong>").addClass("hidden");
});
// Only for Numeric Values in textbox.
$("#txtSalary").keydown(function (event) {
// Allow only backspace and delete
if (event.keyCode == 46 || event.keyCode == 8) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
}
});
$("#txtEmail").keyup(function () {
if ($("#txtEmail").val() != "") {
var re = /^\w+([-+.'][^\s]\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (re.test($("#txtEmail").val())) {
$("#errEmail").html("<strong>Required.</strong>").addClass("hidden");
}
else {
$("#errEmail").html("<strong>Invalid Email</strong>").removeClass("hidden");
$("#txtEmail").focus();
}
}
else {
$("#errEmail").html("<strong>Required.</strong>").removeClass("hidden");
$("#txtEmail").focus();
}
});
$("#btnSave").click(function () {
if ($("#txtLastName").val() != "") {
if ($("#txtFirstName").val() != "") {
if ($("#drpTitle option:selected").text() != "Select Title") {
if ($('[name="optradio"]:checked').length > 0) {
if ($('[name="chkLanguage"]:checked').length > 0) {
if ($("#txtDOB").val() != "") {
if ($("#txtDOJ").val() != "") {
if ($("#txtSalary").val() != "") {
if ($("#txtEmail").val() != "") {
var re = /^\w+([-+.'][^\s]\w+)*@@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (re.test($("#txtEmail").val())) {
}
else {
$("#errEmail").html("<strong>Invalid Email</strong>").removeClass("hidden");
$("#txtEmail").focus();
}
}
else {
$("#errEmail").removeClass("hidden");
$("#txtEmail").focus();
}
}
else {
$("#errSalary").removeClass("hidden");
$("#txtSalary").focus();
}
}
else {
$("#errDOJ").removeClass("hidden");
$("#txtDOJ").focus();
}
}
else {
$("#errDOB").removeClass("hidden");
$("#txtDOB").focus();
}
}
else {
$("#errLanguage").removeClass("hidden");
$('[name="chkLanguage"]').focus();
}
}
else {
$("#errTOC").removeClass("hidden");
$('[name="optradio"]').focus();
}
}
else {
$("#errTitle").removeClass("hidden");
$("#drpTitle").focus();
}
}
else {
$("#errFirstName").removeClass("hidden");
$("#txtFirstName").focus();
}
}
else {
$("#errLastName").removeClass("hidden");
$("#txtLastName").focus();
}
});
});
</script>
</body>
</html>
No comments:
Post a Comment