radio button validation in jquery

<%@ 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 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>

Challenges are what make life interesting

NBar

Thursday, 7 May 2015

radio button validation in jquery

No comments:

Post a Comment

Labels