I was trying to work with this validation. The problem was there is no POST detected even I have changed get to POST. The result still shown in the URI. Any body can help? I am really stuck to java script.
This is the php / HTML code :
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
echo " Form submited....!!!!";
}
?>
<head>
<script src="JSFormValidation.js"></script>
</head>
<body>
<form id="formTest" method="get" action="">
<table>
<tr>
<td><label for="txtName">Name<span class="required">*</span></label></td>
<td><input type="text" id="txtName" name="name"></td>
<td id="elmNameError" class="errorMsg"> </td></tr>
<tr>
<td><label for="txtAddress">Address</label></td>
<td><input type="text" id="txtAddress" name="address"></td>
<td id="elmAddressError" class="errorMsg"> </td></tr>
<tr>
<td><label for="txtZipcode">Zip Code<span class="required">*</span></label></td>
<td><input type="text" id="txtZipcode" name="zipcode"></td>
<td id="elmZipcodeError" class="errorMsg"> </td></tr>
<tr>
<td>Country<span class="required">*</span></td>
<td><select id="selCountry" name="country">
<option value="" selected>Please select...</option>
<option value="AA">AA</option>
<option value="BB">BB</option>
<option value="CC">CC</option>
</select></td>
<td id="elmCountryError" class="errorMsg"> </td></tr>
<tr>
<td>Gender<span class="required">*</span></td>
<td><label><input type="radio" name="gender" value="m">Male</label>
<label><input type="radio" name="gender" value="f">Female</label></td>
<td id="elmGenderError" class="errorMsg"> </td></tr>
<tr>
<td>Preferences<span class="required">*</span></td>
<td><label><input type="checkbox" name="color" value="r">Red</label>
<label><input type="checkbox" name="color" value="g">Green</label>
<label><input type="checkbox" name="color" value="b">Blue</label></td>
<td id="elmColorError" class="errorMsg"> </td></tr>
<tr>
<td><label for="txtPhone">Phone<span class="required">*</span></label></td>
<td><input type="text" id="txtPhone" name="phone"></td>
<td id="elmPhoneError" class="errorMsg"> </td></tr>
<tr>
<td><label for="txtEmail">Email<span class="required">*</span></label></td>
<td><input type="text" id="txtEmail" name="email"></td>
<td id="elmEmailError" class="errorMsg"> </td></tr>
<tr>
<td><label for="txtPassword">Password (6-8 characters)<span class="required">*</span></label></td>
<td><input type="password" id="txtPassword" name="password"></td>
<td id="elmPasswordError" class="errorMsg"> </td></tr>
<tr>
<td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td>
<td><input type="password" id="txtPWVerified" name="pwVerified"></td>
<td id="elmPWVerifiedError" class="errorMsg"> </td></tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="btnSubmit">
<input type="reset" value="CLEAR" id="btnReset"></td>
<td> </td></tr>
</table>
</form>
the JSFormValidation.js script :
window.onload = init;
function init() {
document.getElementById("formTest").onsubmit = validateForm;
document.getElementById("btnReset").onclick = clearForm;
document.getElementById("txtName").focus();
}
function validateForm(theForm) {
with(theForm) {
// return false would prevent default submission
return (isNotEmpty(txtName, "Please enter your name!", elmNameError)
&& isNumeric(txtZipcode, "Please enter a 5-digit zip code!", elmZipcodeError)
&& isLengthMinMax(txtZipcode, 5, 5, "Please enter a 5-digit zip code!", elmZipcodeError)
&& isSelected(selCountry, "Please make a selection!", elmCountryError)
&& isChecked("gender", "Please check a gender!", elmGenderError)
&& isChecked("color", "Please check a color!", elmColorError)
&& isNumeric(txtPhone, "Please enter a valid phone number!", elmPhoneError)
&& isValidEmail(txtEmail, "Enter a valid email!", elmEmailError)
&& isValidPassword(txtPassword, "Password shall be 6-8 characters!", elmPasswordError)
&& verifyPassword(txtPassword, txtPWVerified, "Different from new password!",
elmPWVerifiedError)
);
}
}
function postValidate(isValid, errMsg, errElm, inputElm) {
if (!isValid) {
if (errElm !== undefined && errElm !== null
&& errMsg !== undefined && errMsg !== null) {
errElm.innerHTML = errMsg;
}
if (inputElm !== undefined && inputElm !== null) {
inputElm.classList.add("errorBox"); // Add class for styling
inputElm.focus();
}
} else {
if (errElm !== undefined && errElm !== null) {
errElm.innerHTML = "";
}
if (inputElm !== undefined && inputElm !== null) {
inputElm.classList.remove("errorBox");
}
}
}
function isNotEmpty(inputElm, errMsg, errElm) {
var isValid = (inputElm.value.trim() !== "");
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function isNumeric(inputElm, errMsg, errElm) {
var isValid = (inputElm.value.trim().match(/^\d+$/) !== null);
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function isAlphabetic(inputElm, errMsg, errElm) {
var isValid = (inputElm.value.trim().match(/^[a-zA-Z]+$/) !== null) ;
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function isAlphanumeric(inputElm, errMsg, errElm) {
var isValid = (inputElm.value.trim().match(/^[0-9a-zA-Z]+$/) !== null);
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function isLengthMinMax(inputElm, minLength, maxLength, errMsg, errElm) {
var inputValue = inputElm.value.trim();
var isValid = (inputValue.length >= minLength) && (inputValue.length <= maxLength);
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function isValidEmail(inputElm, errMsg, errElm) {
var isValid = (inputElm.value.trim().match(
/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/) !== null);
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function isSelected(selectElm, errMsg, errElm) {
var isValid = (selectElm.value !== ""); // value in selected <option>
postValidate(isValid, errMsg, errElm, selectElm);
return isValid;
}
function isChecked(inputName, errMsg, errElm) {
var elms = document.getElementsByName(inputName);
var isChecked = false;
for (var i = 0; i < elms.length; ++i) {
if (elms[i].checked) {
isChecked = true;
break;
}
}
postValidate(isChecked, errMsg, errElm, null); // no focus element
return isChecked;
}
function isValidPassword(inputElm, errMsg, errElm) {
var isValid = (inputElm.value.trim().match(/^\w{6,8}$/) !== null);
postValidate(isValid, errMsg, errElm, inputElm);
return isValid;
}
function verifyPassword(pwElm, pwVerifiedElm, errMsg, errElm) {
var isTheSame = (pwElm.value === pwVerifiedElm.value);
postValidate(isTheSame, errMsg, errElm, pwVerifiedElm);
return isTheSame;
}
function clearForm() {
// Remove class "errorBox" from input elements
var elms = document.querySelectorAll('.errorBox'); // class
for (var i = 0; i < elms.length; i++) {
elms[i].classList.remove("errorBox");
}
// Remove previous error messages
elms = document.querySelectorAll('[id$="Error"]'); // id ends with Error
for (var i = 0; i < elms.length; i++) {
elms[i].innerHTML = "";
}
// Set initial focus
document.getElementById("txtName").focus();
}
Source code : http://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Examples.html
