<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<html>
<head>
<script>
$(document).ready(function(){
$('#companySelect').change(function () {
var selectedValue = $(this).prop('value');
if (selectedValue == '--Please Select') {
$('#officeName').empty();
} else {
$.post('${pageContext.request.contextPath}/docmanager/admin/officeListjson', selectedValue, function(data) {
$('#officeName').empty();
$.each(data, function(index,value) {
//alert("index"+index +"-value="+value.officeId);
$('#officeName').append($("<option></option>").val(value.officeId).html(value.officeName));
});
}, 'json');
}
});
$("form[id='createUserForm']").submit(function() {
$(this).ajaxSubmit({
dataType: "json",
//success: dialogSaveStatusCheck,
success: function(data) {
if(data.success == 'true') alert('Saved Successfully..');
else alert('Failed adding person: ' + data.success + ', ' + data.errorMessage);
},
error: formSaveError
});
return false;
});
$('#btnSubmit').click(function(e) {
var isValid = true;
if ( $('#fName').val() == '' )
{
isValid = false;
$('#fName').css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
var fName = $('#fName').val();
if(validateFNameSize(fName)){
//$('#fNameErr').hide();
}
else {
$("#fNameErr").text("Invalid First Name")
$('#fNameErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
e.preventDefault();
$('#fName').focus();
}
if ( $('#lName').val() == '' )
{ isValid = false;
$('#lName').css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
var lName = $('#lName').val()
if(validateLNameSize(fName)){
//$('#fNameErr').hide();
}
else {
$("#lNameErr").text("Invalid Last Name")
$('#lNameErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
e.preventDefault();
$('#LName').focus();
}
if ( $('#email').val() == '' )
{
isValid = false;
$('#email').css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
if ( $('#login').val() == '' )
{
isValid = false;
$('#login').css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
var login = $('#login').val()
if(validatelogin(login)){
//$('#fNameErr').hide();
}
else {
$("#login").text("Invalid login Name")
$('#login').css({
"border": "1px solid red",
"background": "#FFCECE"
});
e.preventDefault();
$('#LName').focus();
}
if ( $('#officeName').val() == '' )
{
isValid = false;
$('#officeName').css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
var officeName = $('#officeName').val()
if(validateLNameSize(officeName)){
//$('#fNameErr').hide();
}
else {
$("#lNameErr").text("Invalid office Name")
$('#lNameErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
e.preventDefault();
$('#LName').focus();
}
if ( $('#password').val() == '' )
{
isValid = false;
$('#password').css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
var passwordName = $('#password').val()
if(validatePassword(passwordName)){
//$('#fNameErr').hide();
}
else {
$("#pwdErr").text("Invalid Password")
$('#pwdErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
e.preventDefault();
}
var sEmail = $('#email').val();
if ($.trim(sEmail).length == 0) {
// alert('Please enter valid email address');
e.preventDefault();
}
if (validateEmail(sEmail)) {
//alert('Email is valid');
$('#emailErr').hide();
}
else {
$("#emailErr").text("Invalid Email Address")
$('#emailErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
//alert('Invalid Email Address');
e.preventDefault();
$('#email').focus();
}
if (isValid == false)
e.preventDefault();
$('#createUserForm input').blur(function() {
alert('Thanks');
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
else
alert('Thank you for submitting');
});
});
function validateEmail(sEmail) {
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
return true;
}
else {
return false;
}
}
function validateFNameSize(fName) {
if (fName.length <= 6) {
$("#fNameErr").text("First Name must be at least 5 characters long")
$('#fNameErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
return true;
}
else {
return false;
}
}
function validateLNameSize(lName) {
if (lName.length <= 6) {
$("#lNameErr").text("Last Name must be at least 5 characters long")
$('#lNameErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
return true;
}
else {
return false;
}
}
function validatePassword(passwordName) {
if (passwordName.length <= 3) {
$("#pwdErr").text("Password must be at least 3 characters long")
$('#pwdErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
return true;
}
else {
return false;
}
}
function validatelogin(login) {
if (login.length <= 6) {
$("#loginErr").text("login must be at least 6 characters long")
$('#loginErr').css({
"border": "1px solid red",
"background": "#FFCECE"
});
return true;
}
else {
return false;
}
}
</script>
</head>
<body>
<form:form id="createUserForm" method="POST" commandName="user" action="${pageContext.request.contextPath}/docmanager/admin/save">
<div class="mainDiv">
<div class="inner1Div">USER DETAILS</div>
<table border="1" class="tableNav">
<tr>
<td>FirstName * : <form:input id="fName" path="firstName" /><!-- <div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.</p>
</div>
</div> -->
<div id="fNameErr"></div></td>
<td>LastName *: <form:input id="lName" path="lastName" /><div id="lNameErr"></div></td>
<td>Email *: <form:input id="email" path="email" /><div id="emailErr"></div></td>
</tr>
<tr>
<td>Login * : <form:input id="login" path="login" /><div id="loginErr"></div></td>
<td>Password * : <form:password id="password"path="password" /><div id="pwdErr"></div></td>
</tr>
</table>
</div>
<div class="_blankDiv"></div>
<div class="mainDiv">
<div class="inner1Div">USER ACCESS</div>
<table border="1" class="tableNav">
<tr>
<td><form:label path="companyName"></form:label></td>
<td>CompanyId* <form:select path="companyId"
id="companySelect" cssClass="select">
<form:option value="-" label="--Please Select" />
<form:options path="companyId" items="${compList}"
itemValue="companyId" itemLabel="companyName" />
</form:select></td>
<td><form:label path="officeId"></form:label></td>
<td>OfficeId*<form:select id="officeName" path="officeId"
cssClass="select"></form:select></td>
</tr>
</table>
</div>
<div class="_blankDiv"></div>
<div class="mainDiv">
<div class="inner1Div">USER ROLE</div>
<table class="tableNav">
<tr>
<td><form:radiobutton path="role" value="3"/>USER_ROLE</td>
<td><form:radiobutton path="role" value="2"/>ADMIN_ROLE</td>
<td><form:radiobutton path="role" value="1" disabled="true"/>SUPER_USER</td>
</tr>
</table>
</div>
<div class="_blankDiv"></div>
<div>
<table>
<tr>
<td width="30%">
<button type="submit" value="Submit" class="button" id="btnSubmit">Submit</button>
</td>
<td width="30">
<button type="reset" value="Reset" class="button">Reset</button>
</td>
</tr>
</table>
</div>
</form:form>
</body>
</html>