Meena's Class Prints: EMPLOYEE DATABASE VALIDATION IN JAVASCRIPT

Program:

<html>
<head>
<title></title>
</head>
<body>
<center>
<h3>EMPLOYEE DATABASE VALIDATION</h3>
</center>
<form id="employeeFormId" name="employeeForm" method="post">
<div><label>Name:</label> <input type="text" id="Name"></div>
<div><label>Date Of Birth:</label> <input type="text" id=
"txtDateOfBirth" name="dateOfBirth" onclick=""></div>
<div><label>Education:</label> <input type="checkbox" value=
"graduation" id="chkGraduation" name="chkGraduation">Graduation
<input type="checkbox" value="postGraduation" id=
"chkPostGraduation" name="chkPostGraduation">PostGraduation</div>
<div><label>Gender:</label> <input type="radio" id="rdoMale" name=
"gender" value="0">Male <input type="radio" id="rdoFemale" name=
"gender" value="1">FeMale</div>
<div><label>Department:</label> <select id="ddlDepartment" name=
"ddlDepartment">
<option name="sel" value="unselected">Select Type</option>
<option name="PRO" value="PRODUCTION">PRODUCTION</option>
<option name="SAL" value="SALES">SALES</option>
<option name="TES" value="TESTING">TESTING</option>
</select></div>
<div><input type="button" id="Submit" value="Submit"></div>
</form>
<div>
<p id="output"></p>
</div>
<script type="text/javascript">

function nameValidation() {
        var a = document.employeeForm.Name.value;
        if (a == "") {
                document.getElementById('output').innerHTML += "Please Enter Your Name <br/>";
                employeeForm.Name.focus();
                return false;
        }
        if (!isNaN(a)) {
                document.getElementById('output').innerHTML += "Please Enter Only Characters <br/>";
                employeeForm.Name.select();
                return false;
        }
        if ((a.length < 5) || (a.length > 15)) {
                document.getElementById('output').innerHTML += "Your Character must be 5 to 15 Character <br/>";
                employeeForm.Name.select();
                return false;
        }
        document.getElementById('output').innerHTML += "Name field has been validated! <br/>";
        return true;
}

function dobvalidation() {
        // regular expression to match required date format
        re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
        if (employeeForm.dateOfBirth.value === '' || !employeeForm.dateOfBirth.value.match(re)) {
                document.getElementById('output').innerHTML += "Invalid date format: " + employeeForm.dateOfBirth.value + " <br/>";
                employeeForm.dateOfBirth.focus();
                return false;
        }
        document.getElementById('output').innerHTML += "Date of birth field has been validated! <br/>";
        return true;
}

function genderValidation() {
        if ((employeeForm.rdoMale.checked == false) && (employeeForm.rdoFemale.checked == false)) {
                document.getElementById('output').innerHTML += "Please choose your Gender: Male or Female <br/>";
                return false;
        }
        document.getElementById('output').innerHTML += "Gender has been validated! <br/>";
        return true;
}

function graduationValidation() {
        if ((employeeForm.chkGraduation.checked == false) && (employeeForm.chkPostGraduation.checked == false)) {
                document.getElementById('output').innerHTML += "Please choose your Eduaction <br/>";
                return false;
        }
        document.getElementById('output').innerHTML += "Education has been validated! <br/>";
        return true;
}

function departmentValidation() {
        if (employeeForm.ddlDepartment.value === "unselected") {
                document.getElementById('output').innerHTML += "Select a Department to submit! <br/>";
                return false;
        }
        document.getElementById('output').innerHTML += "Department has been validated! <br/>";
        return true;
}
employeeForm.Submit.onclick = function() {
        document.getElementById('output').innerHTML = "";
        if (nameValidation() && dobvalidation() && graduationValidation() && genderValidation() && departmentValidation()) {
                document.getElementById('output').innerHTML = "<p style='color:green'>YOUR FORM HAS BEEN VALIDATED!<p>";
        }
}

</script>
</body>
</html>

Meena's Class Prints

Pages

EMPLOYEE DATABASE VALIDATION IN JAVASCRIPT

Program:

Output:

EMPLOYEE DATABASE VALIDATION

No comments:

Post a Comment