|
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TZ</title>
<style>
.light::-webkit-input-placeholder {color:blue;opacity: 0.5}
.light::-moz-placeholder {color:blue;opacity: 0.5}
.light:-moz-placeholder {color:blue;opacity: 0.5}
.light:-ms-input-placeholder {color:blue;opacity: 0.5}
.highlight::-webkit-input-placeholder {color:blue;opacity: 0}
.highlight::-moz-placeholder {color:blue;opacity: 0}
.highlight:-moz-placeholder {color:blue;opacity: 0}
.highlight:-ms-input-placeholder {color:blue;opacity: 0}
</style>
<script>
function validate(){
var fn_val=document.forms["Myform"].elements["fname"].value;
var ln_val=document.forms["Myform"].elements["lname"].value;
var job_val=document.forms["Myform"].elements["job"].value;
var com_val=document.forms["Myform"].elements["company"].value;
if(fn_val == ""){
alert('Имя должно быть обязательно введено')
fname.focus = function() {this.className='highlight'}
}
if (ln_val == "") {
alert('Фамилия должна быть обязательно введена')
lname.focus = function() {this.className='highlight'}
}
if(job_val == ""){
alert('Должность должна быть обязательно введена')
job.focus = function() {this.className='highlight'}
}
if (com_val == "") {
alert('Компания должна быть обязательно введена')
company.focus = function() {this.className='highlight'}
}
}
function checkLname(){
var fn_val=document.forms["Myform"].elements["fname"].value;
var ln_val=document.forms["Myform"].elements["lname"].value;
var job_val=document.forms["Myform"].elements["job"].value;
var com_val=document.forms["Myform"].elements["company"].value;
var r =/([a-z]+)/i;
if (fn_val.search(r)< 0){alert("Некорректное введено имя!")}
if (ln_val.search(r)< 0){alert("Некорректно введена фамилия!")}
if (job_val.search(r)< 0){alert("Некорректно введена должность!")}
if (com_val.search(r)< 0){alert("Некорректно введена компания!")}
}
</script>
</head>
<body>
<form name="Myform">
<input type="text" class="light" id="fn" name="fname" placeholder="First name" onfocus="focusElem(this)" onblur="blurElem(this)" >
<input type="text" class="light" id="ln" name="lname" placeholder="Last name" onfocus="focusElem(this)" onblur="blurElem(this)" >
<br>
<input type="text" class="light" id="j" name="job"placeholder="Job" onfocus="focusElem(this)" onblur="blurElem(this)">
<input type="text" class="light" id="com" name="company" placeholder="Company" onfocus="focusElem(this)" onblur="blurElem(this)">
<br>
<input type="submit" value="Send" onclick="validate(); checkLname()">
</form>
<script>
function focusElem (elem) {
elem.className='highlight';
}
function blurElem (elem) {
elem.className ='light';
}
</script>
</body>
</html>
|