Hello
Here I publish code for simple validation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel='stylesheet' href='form-style.css' type='text/css' /> -->
</head>
<style>
body {font-family: Arial;}
input[type=text], input[type=password], input[type= number], input[type=email]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.center{text-align: center;}
.red{color: #FF0000;}
.green{color: #008000;}
.error{border: 1px solid #FF0000; color: #FF0000}
</style>
<script type="text/javascript">
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 &&
(charCode < 48 || charCode > 57)) {
alert("Enter Number");
return false;
}else{
return true;
}
}
function formValidation()
{
var result = false;
//var fullName = document.forms["form1"]["fullName"].value;
var fullName = document.getElementById('fullName').value;
var fullName1 = document.getElementById('fullName');
var rnumber = document.getElementById('rnumber').value;
var rnumber1 = document.getElementById('rnumber');
var remail = document.getElementById('remail').value;
var remail1 = document.getElementById('remail');
//var number = document.forms["form1"]["number"].value;
//var psw = document.forms["form1"]["psw"].value;
//var email = document.forms["form1"]["email"].value;
var psw = document.getElementById('psw').value;
var psw1 = document.getElementById('psw');
document.getElementById("rnamevalid").innerHTML = '';
document.getElementById("ridvalid").innerHTML = '';
document.getElementById("rpassvalid").innerHTML = '';
document.getElementById("remailvalid").innerHTML = '';
if (fullName !== null && fullName !== '') {
// true
result = true;
} else {
//alert("Please enter Realtor Name");
document.getElementById("rnamevalid").innerHTML = "<span class='red'> This Realtor Name is required!</span>";
fullName1.focus();
//return false;
}
if (rnumber !== null && rnumber !== '') {
// true
var c = rnumber.length;
if(c == 8){
//return true;
result = true;
}else{
document.getElementById("ridvalid").innerHTML = "<span class='red'> ID must be 8 characters!</span>";
result = false;
rnumber1.focus();
}
} else {
//alert("Please enter Realtor ID");
document.getElementById("ridvalid").innerHTML = "<span class='red'> This Realtor ID is required!</span>";
result = false;
rnumber1.focus();
//return false;
}
if (remail !== null && remail !== '') {
// true
//alert(remail);
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/ ;
if (reg.test(remail) == false)
{
//alert('Invalid Email Address');
document.getElementById("remailvalid").innerHTML = "<span class='red'> Email ID is not Valid!</span>";
result = false;
remail1.focus();
//return false;
}else{
//alert('valid Email Address'); return true;
result = true;
}
} else {
//alert("Please enter Realtor Name");
document.getElementById("remailvalid").innerHTML = "<span class='red'> Email ID is required!</span>";
result = false;
remail1.focus();
//return false;
}
if (psw !== null && psw !== '') {
// true
var p = psw.length;
if(p >= 8){
//return true;
//var paswd= /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/;
var paswd= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,20}$/;
if(paswd.test(psw)== false){
document.getElementById("rpassvalid").innerHTML = "<span class='red'> Password must contains laters, digit and special character!</span>";
result = false;
psw1.focus();
}
else{
//alert('right pass'); return true;
result = true;
}
}else{
document.getElementById("rpassvalid").innerHTML = "<span class='red'> Password must be 8 characters!</span>";
result = false;
psw1.focus();
}
} else {
//alert("Please enter Realtor ID");
document.getElementById("rpassvalid").innerHTML = "<span class='red'> Password is required!</span>";
result = false;
psw1.focus();
//return false;
}
if (result == false) {
alert('something missing!');
return false;
}else{
alert('Now you can submit data');
return true;
}
}
</script>
<body>
<h1 class="center">Javascript Test</h1>
<form name="form1" id="form1" method="post" onSubmit="return formValidation();" >
<!-- onSubmit="return formValidation();" -->
<fieldset>
<legend>TEST PURE JAVASCRIPT:</legend>
<br><br>
<label for="name">Realtor Name: <span class="red">*</span></label> <span id="rnamevalid" class="validate"></span>
<input type="text" name="fullName" id="fullName" placeholder="Full Name" class="required" />
<br><br>
<label for="idnumber"> Realtor ID: <span class="red">*</span></label> <span id="ridvalid" class="validate"></span>
<input type="number" name="rnumber" id="rnumber" placeholder="Realtor ID" onkeypress="return isNumberKey(event)" maxlength="8" />
<br><br>
<label for="email">Email: <span class="red">*</span></label><span id="remailvalid" class="validate"></span>
<input type="email" id="remail" name="remail" placeholder="Enter Email ID" class="required" />
<br><br>
<label for="psw">Password: <span class="red">*</span></label> <span id="rpassvalid" class="validate"></span>
<input type="text" id="psw" name="psw" placeholder="Enter Password" />
<font size="2" color="red">Must contain at least one number, one uppercase, lowercase letter, and at least 8 or more characters</font>
<center>
<input type="checkbox" onclick="alert('Please enter an email !')" > Email me a transaction confirmation
<br><br>
<label for="transaction">Select a Transaction:</label>
<select id="Transaction" name="Transaction">
<option value="Schedule"> Schedule </option>
<option value="Remove"> Remove </option>
<option value="Search Realtor's schedule"> Search </option>
<option value="Register"> Register </option>
</select>
<br><br>
<input type="submit" name="submit" id="submit" value="Submit" />
</center>
</fieldset>
</form>
</body>
</html>
Here I publish code for simple validation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel='stylesheet' href='form-style.css' type='text/css' /> -->
</head>
<style>
body {font-family: Arial;}
input[type=text], input[type=password], input[type= number], input[type=email]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.center{text-align: center;}
.red{color: #FF0000;}
.green{color: #008000;}
.error{border: 1px solid #FF0000; color: #FF0000}
</style>
<script type="text/javascript">
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 &&
(charCode < 48 || charCode > 57)) {
alert("Enter Number");
return false;
}else{
return true;
}
}
function formValidation()
{
var result = false;
//var fullName = document.forms["form1"]["fullName"].value;
var fullName = document.getElementById('fullName').value;
var fullName1 = document.getElementById('fullName');
var rnumber = document.getElementById('rnumber').value;
var rnumber1 = document.getElementById('rnumber');
var remail = document.getElementById('remail').value;
var remail1 = document.getElementById('remail');
//var number = document.forms["form1"]["number"].value;
//var psw = document.forms["form1"]["psw"].value;
//var email = document.forms["form1"]["email"].value;
var psw = document.getElementById('psw').value;
var psw1 = document.getElementById('psw');
document.getElementById("rnamevalid").innerHTML = '';
document.getElementById("ridvalid").innerHTML = '';
document.getElementById("rpassvalid").innerHTML = '';
document.getElementById("remailvalid").innerHTML = '';
if (fullName !== null && fullName !== '') {
// true
result = true;
} else {
//alert("Please enter Realtor Name");
document.getElementById("rnamevalid").innerHTML = "<span class='red'> This Realtor Name is required!</span>";
fullName1.focus();
//return false;
}
if (rnumber !== null && rnumber !== '') {
// true
var c = rnumber.length;
if(c == 8){
//return true;
result = true;
}else{
document.getElementById("ridvalid").innerHTML = "<span class='red'> ID must be 8 characters!</span>";
result = false;
rnumber1.focus();
}
} else {
//alert("Please enter Realtor ID");
document.getElementById("ridvalid").innerHTML = "<span class='red'> This Realtor ID is required!</span>";
result = false;
rnumber1.focus();
//return false;
}
if (remail !== null && remail !== '') {
// true
//alert(remail);
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/ ;
if (reg.test(remail) == false)
{
//alert('Invalid Email Address');
document.getElementById("remailvalid").innerHTML = "<span class='red'> Email ID is not Valid!</span>";
result = false;
remail1.focus();
//return false;
}else{
//alert('valid Email Address'); return true;
result = true;
}
} else {
//alert("Please enter Realtor Name");
document.getElementById("remailvalid").innerHTML = "<span class='red'> Email ID is required!</span>";
result = false;
remail1.focus();
//return false;
}
if (psw !== null && psw !== '') {
// true
var p = psw.length;
if(p >= 8){
//return true;
//var paswd= /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/;
var paswd= /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,20}$/;
if(paswd.test(psw)== false){
document.getElementById("rpassvalid").innerHTML = "<span class='red'> Password must contains laters, digit and special character!</span>";
result = false;
psw1.focus();
}
else{
//alert('right pass'); return true;
result = true;
}
}else{
document.getElementById("rpassvalid").innerHTML = "<span class='red'> Password must be 8 characters!</span>";
result = false;
psw1.focus();
}
} else {
//alert("Please enter Realtor ID");
document.getElementById("rpassvalid").innerHTML = "<span class='red'> Password is required!</span>";
result = false;
psw1.focus();
//return false;
}
if (result == false) {
alert('something missing!');
return false;
}else{
alert('Now you can submit data');
return true;
}
}
</script>
<body>
<h1 class="center">Javascript Test</h1>
<form name="form1" id="form1" method="post" onSubmit="return formValidation();" >
<!-- onSubmit="return formValidation();" -->
<fieldset>
<legend>TEST PURE JAVASCRIPT:</legend>
<br><br>
<label for="name">Realtor Name: <span class="red">*</span></label> <span id="rnamevalid" class="validate"></span>
<input type="text" name="fullName" id="fullName" placeholder="Full Name" class="required" />
<br><br>
<label for="idnumber"> Realtor ID: <span class="red">*</span></label> <span id="ridvalid" class="validate"></span>
<input type="number" name="rnumber" id="rnumber" placeholder="Realtor ID" onkeypress="return isNumberKey(event)" maxlength="8" />
<br><br>
<label for="email">Email: <span class="red">*</span></label><span id="remailvalid" class="validate"></span>
<input type="email" id="remail" name="remail" placeholder="Enter Email ID" class="required" />
<br><br>
<label for="psw">Password: <span class="red">*</span></label> <span id="rpassvalid" class="validate"></span>
<input type="text" id="psw" name="psw" placeholder="Enter Password" />
<font size="2" color="red">Must contain at least one number, one uppercase, lowercase letter, and at least 8 or more characters</font>
<center>
<input type="checkbox" onclick="alert('Please enter an email !')" > Email me a transaction confirmation
<br><br>
<label for="transaction">Select a Transaction:</label>
<select id="Transaction" name="Transaction">
<option value="Schedule"> Schedule </option>
<option value="Remove"> Remove </option>
<option value="Search Realtor's schedule"> Search </option>
<option value="Register"> Register </option>
</select>
<br><br>
<input type="submit" name="submit" id="submit" value="Submit" />
</center>
</fieldset>
</form>
</body>
</html>
No comments:
Post a Comment