Alert style validation using Javascript

Alert style validation using javascript is very useful thing web site form validation, form validation is one the important thing in web designing and developing, in initial stage of every developer and design must done this, that is validation. so now i'm showing that the same thing. that is alert style validation using javascript. which means that on submit it show the popup window to alert and tell to fill the field. let see the details.

DOWNLOAD LIVE DEMO

javaScript is needed to make validation now, html5 is there to make the simple validation using required, but it is old style and some what powerful validation with the alert of pop up window. see the above image, the pop up alert window comes like that in Google chrome.

FROM DESIGN

<form method="post" name="form" action="" onsubmit="return validate();">
<label class="Name">
Name<br />
<input id="name" name="name" value="" type="text" autocomplete="off" placeholder="Ex: arunkumar"><br />
</label>
<label class="username">
Email<br />
<input id="username" name="email" value="" type="text" autocomplete="off" placeholder="Ex: arunkumar@gmail.com"><br />
</label>
<label class="Mobile">
Mobile<br />
<input id="Mobile" name="number" placeholder="Mobile number" value=""type="text" autocomplete="off" onkeypress="return Numbers(event);">
<br />
</label>
<label class="textarea">
Address<br />
<textarea id="textareaid" name="textareaname" value="" autocomplete="off" placeholder="Enter your full address"></textarea><br />
</label>
<label class="selsex">
Sex<br />
<select name="sex">  
<option value=""> Select </option>
<option value="male"> Male </option>
<option value="female"> Female </option>
</select>
</label><br />
<input class="submit button" type="submit" value="send" name="submit"/>  
</form>

the above coding is for form. what we are given in the form application. let the script for make the validation.
autocomplete="off" is for does not show the previous what we entered. and placeholder for make fill place with the dummy text before on focus the input filed.

SCRIPT VALIDATION AND NUMBER EVENT

<script>
function validate()
 {
  var name=document.form.name.value;
  if (name==null || name=="")
  {
  alert("Enter your name");
  document.form.name.focus();
  return false;
  }
  
  var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  var addr = document.form.email.value;
  if(reg.test(addr) == false) 
  {
  alert('Invalid E-mail address');
  document.form.email.focus();
  return false;
  }
  
  var number=document.form.number.value;
  if (number==null || number=="")
  {
  alert("Enter your number");
  document.form.number.focus();
  return false;
  }
  
  if((number.length < 10) || (number.length > 10))
{
alert(" Your Mobile Number must be 1 to 10 Integers");
document.form.number.select();
return false;
}
  
  var tname=document.form.textareaname.value;
  if (tname==null || tname=="")
  {
  alert("Enter your address");
  document.form.textareaname.focus();
  return false;
  }
  
   
  var opt=document.form.sex.value;
  if (opt==null || opt=="")
  {
  alert("Select your sex");
  document.form.sex.focus();
  return false;
  }
  alert("Success your data all submited.")
  }
  
  function Numbers(event) 
   {
    var e = event || evt; // for trans-browser compatibility
    var charCode = e.which || e.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
    return true;
   }
</script>

highlighted coding is for make mobile number validation. that support only numbers.

STYLE CSS

<style type="text/css">
*{ margin:0; padding:0; font-family:Tahoma, Geneva, sans-serif; }
.container { padding-top:15px; width:300px; margin:0 auto; }
input { border:2px #666 solid; width:250px; height:30px; margin-bottom:10px; }
select { border:2px #666 solid; width:250px; height:30px; margin-bottom:10px; }
select:focus{ border:2px #F00 solid;}
textarea { border:2px #666 solid; width:250px; height:100px; margin-bottom:10px;}
textarea:focus { border:2px #F00 solid;}
input:focus { border:2px #F00 solid;}
</style>

just make style using CSS which means that, make on focus with some style. that is what i done here. on focus just give different color border. here i made red color border on focus.

Change background image while page refresh using Javascript

Choose state and city based on country using Jquery

Simple concept for Select All text OnClick in textarea