Web Code Helpers Coding Blog, Tutorials, html5, css, jQuery, Ajax, javascript, html, examples and Demos Web CodeHelpers

Registration form validation using jquery with example

User Registration form validation using javascript

in this tutorial we explained the form validation using jquery










User Registration Form Demo

Form Validated Using jquery

Birthday

     
   
Sign Up


function Submit(){
 var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
 var formemail = $("#femail").val();
 var formreemail = $("#reemail").val();
 var name = $("#name").val();
 var lname = $("#lname").val();
 var femail = $("#femail").val();
 var reemail = $("#reemail").val();
 var pass = $("#pass").val();
 var month = $("#month").val();
 var day = $("#day").val();
 var year = $("#year").val();
 
  if($("#name").val() == "" ){
   $("#name").focus();
   $("#errorBox").html("enter the First Name");
   return false;
  }else if($("#lname").val() == "" ){
    $("#lname").focus();
    $("#errorBox").html("enter the Last Name");
    return false;
  }else if($("#femail").val() == "" ){
    $("#femail").focus();
    $("#errorBox").html("enter the email");
    return false;
  }else if(!emailRegex.test(formemail)){
    $("#femail").focus();
    $("#errorBox").html("enter the valid email");
    return false;
  }else if($('#reemail').val() == ""){
    $("#reemail").focus();
    $("#errorBox").html("re enter the  email");
    return false;
  }else if(!emailRegex.test(formreemail)){
    $("#reemail").focus();
    $("#errorBox").html("re enter the valid email");
    return false;
  }else if(reemail != femail){
    $("#reemail").focus();
    $("#errorBox").html("emails are not matching, re-enter again");
    return false;
  }else if($('#pass').val() == ""){
    $("#pass").focus();
    $("#errorBox").html("Enter the password");
    return false;
  }else if($('#month').val() == ""){
    $("#month").focus();
    $("#errorBox").html("Select Month");
    return false;
  }else if($('#day').val() == ""){
    $("#day").focus();
    $("#errorBox").html("Select day");
    return false;
  }else if($('#year').val() == ""){
    $("#year").focus();
    $("#errorBox").html("Select Year");
    return false;
  }else if($('input[name=radiobutton]:checked').length<=0){
    $("#errorBox").html("Select gender");
    return false;
   }else if($(name != '' && lname != '' && femail != '' && reemail != '' && pass != '' && month != '' && day != '' && year != '')){
   $("#errorBox").html("form submitted successfully")
   }
  
 }


*{
 margin:0px;
 padding:0px;
 }
body{
 font-family:Tahoma, Geneva, sans-serif;
 }
#container{
 width:550px;
 background-color:rgba(250,250,252,.9);
 margin:auto;
 margin-top:10px;
 margin-bottom:10px;
 box-shadow:0 0 3px #999;
 }
#container_body{
 padding:20px;
 }
.form_title{
 font-size:35px;
 color:#141823;
 text-align:center;
 padding:10px;
 font-weight:normal;
 }
.head_para{
 font-size:19px;
 color:#99a2a7;
 text-align:center;
 font-weight:normal;
 }
#form_name{
 padding:25px 0 0 15px;
 }
.firstnameorlastname{
  margin-right:20px;
 }
.input_name{
 width:207px;
 padding:5px;
 font-size:18px;
 }
#email_form{
 clear:both;
 padding:15px 0 10px 0px;
 }
.input_email{
 width:434px;
 padding:5px;
 font-size:18px;
 }
#Re_email_form{
 padding:10px 0 10px 0px;
 }
.input_Re_email{
 width:434px;
 padding:5px;
 font-size:18px;
 }
#password_form{
 padding:10px 0 10px 0px;
 }
.input_password{
 width:434px;
 padding:5px;
 font-size:18px;
 }
.birthday_title{
 font-size:16px; 
 color:#8b919d; 
 font-weight:normal;
 padding:0 0 10px 0;
 }
select{
 padding:5px;
 }
#birthday{
 font-size:12px;
 color:#8b919d;
 padding-top:10px;
 }
#radio_button{
 padding:10px 0 0 0;
 }
#sign_user{
 font-size:14px;
 color:#FFF;
 text-align:center;
 background-color:#3B5998;
 padding:10px;
 margin-top:10px;
 cursor: pointer;
 }
#errorBox{
 color:#F00;
 }


Author
V S NageswaraRao
UI Developer
Hyderabad

Login with Facebook Account - Code example / live demo

Login using facebook account 

in this article we are going show how to integrate the facebook login module on your website 

Now a day ,  customers are bored to fill the registration form, Every one check for "Login With FB",

Facebook Login will helps to drive lot of users to your website with single sign in

Facebook Login Creation Process :

Step 1:

for fb login process we need appId, check below link to know how to create a facebook app

How to Create a Facebook App 


Javascript Code :

  
 
 
 


for above FB "me" API Response fields is given below :

Property NameDescriptionType
id
The user id
numeric string
link
A link to the user's Timeline
string
first_name
The user's first name
string
quotes
The user's favorite quotes
string
name
The user's full name
string
hometown
The user's hometown
bio
The user's bio
string
religion
The user's religion
string
middle_name
The user's middle name
string
about
About the user
string
is_verified
People with large numbers of followers can have the authenticity of their identity manually verified by Facebook. This field indicates whether the user profile is verified in this way.
bool
gender
The user's gender
string
third_party_id
A string containing an anonymous, but unique identifier for the user. You can use this identifier with third-parties
string
relationship_status
The user's relationship status
string
last_name
The user's last name
string
locale
The user's locale
string
verified
Indicates whether the user account has been verified. This is distinct from the is_verifiedfield. Someone is considered verified if they take any of the following actions:
  • Register for mobile
  • Confirm their account via SMS
  • Enter a valid credit card
bool
political
The user's political views
string
name_format
The user's name formatted to correctly handle Chinese, Japanese, Korean ordering
string
significant_other
The user's significant other
website
The user's website
string
location
The user's current location
username
The user's username
string



for above FB "me/picture" API Response fields is given below :

Fields



ParameterDescriptionType
url
The URL of the profile photo.
string
is_silhouette
Indicates whether the profile photo is the default 'silhouette' picture, or has been replaced.
bool
height
Picture height in pixels. height and width are only returned when specified as modifiers.
int
width
Picture width in pixels.
int

HTML Code :



Author
Bhaskar Vankayala
Sr Software Engineer UI
Hyderabad

Registration form validation using javascript with example



User Registration form validation using javascript

in this tutorial we explained the form validation using javascript


HTML Code

<div id="emptyDiv"></div>
<div id="description"></div>
<!--container start-->
<div id="container">
  <div id="container_body">
    <div>
      <h2 class="form_title">User Registration Form Demo</h2>
      <p class="head_para">Form Validated Using Javascript</p>
    </div>
    <!--Form  start-->
    <div id="form_name">
      <div class="firstnameorlastname">
       <form name="form" >
       <div id="errorBox"></div>
        <input type="text" name="Name" value="" placeholder="First Name"  class="input_name" >
        <input type="text" name="LastName" value="" placeholder="Last Name" class="input_name" >
        
      </div>
      <div id="email_form">
        <input type="text" name="Email" value=""  placeholder="Your Email" class="input_email">
      </div>
      <div id="Re_email_form">
        <input type="text" name="enterEmail" value=""  placeholder="Re-enter Email" class="input_Re_email">
      </div>
      <div id="password_form">
        <input type="password" name="Password" value=""  placeholder="New Password" class="input_password">
      </div>
      <!--birthday details start-->
      <div>
        <h3 class="birthday_title">Birthday</h3>
      </div>
      <div>
        <select name="birthday_month" >
          <option value="" selected >Month</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
        </select>
        &nbsp;&nbsp;
        <select name="birthday_day" >
          <option value="" selected>Day</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        &nbsp;&nbsp;
        <select name="birthday_year">
          <option value="" selected>Year</option>
          <option value="2013">2013</option>
          <option value="2012">2012</option>
          <option value="2011">2011</option>
          <option value="2010">2010</option>
          <option value="2009">2009</option>
        </select>
      </div>
      <!--birthday details ends-->
      <div id="radio_button">
        <input type="radio" name="radiobutton" value="Female">
        <label >Female</label>
        &nbsp;&nbsp;&nbsp;
        <input type="radio" name="radiobutton" value="Male">
        <label >Male</label>
      </div>
       <div>
        <p id="sign_user" onClick="Submit()">Sign Up </p>
      </div>
     </form>
    </div>
    <!--form ends--> 
  </div>
</div>
<!--container ends-->


CSS Code

*{
 margin:0px;
 padding:0px;
 }
body{
 font-family:Tahoma, Geneva, sans-serif;
 }
#container{
 width:550px;
 background-color:rgba(250,250,252,.9);
 margin:auto;
 margin-top:10px;
 margin-bottom:10px;
 box-shadow:0 0 3px #999;
 }
#container_body{
 padding:20px;
 }
.form_title{
 font-size:35px;
 color:#141823;
 text-align:center;
 padding:10px;
 font-weight:normal;
 }
.head_para{
 font-size:19px;
 color:#99a2a7;
 text-align:center;
 font-weight:normal;
 }
#form_name{
 padding:25px 0 0 15px;
 }
.firstnameorlastname{
  margin-right:20px;
 }
.input_name{
 width:207px;
 padding:5px;
 font-size:18px;
 }
#email_form{
 clear:both;
 padding:15px 0 10px 0px;
 }
.input_email{
 width:434px;
 padding:5px;
 font-size:18px;
 }
#Re_email_form{
 padding:10px 0 10px 0px;
 }
.input_Re_email{
 width:434px;
 padding:5px;
 font-size:18px;
 }
#password_form{
 padding:10px 0 10px 0px;
 }
.input_password{
 width:434px;
 padding:5px;
 font-size:18px;
 }
.birthday_title{
 font-size:16px; 
 color:#8b919d; 
 font-weight:normal;
 padding:0 0 10px 0;
 }
select{
 padding:5px;
 }
#birthday{
 font-size:12px;
 color:#8b919d;
 padding-top:10px;
 }
#radio_button{
 padding:10px 0 0 0;
 }
#sign_user{
 font-size:14px;
 color:#FFF;
 text-align:center;
 background-color:#3B5998;
 padding:10px;
 margin-top:10px;
 cursor: pointer;
 }
#errorBox{
 color:#F00;
 }


Javascript Code

function Submit(){
 var emailRegex = /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
 var fname = document.form.Name.value,
  lname = document.form.LastName.value,
  femail = document.form.Email.value,
  freemail = document.form.enterEmail.value,
  fpassword = document.form.Password.value,
  fmonth = document.form.birthday_month.value,
  fday = document.form.birthday_day.value,
  fyear = document.form.birthday_year.value;
  
 if( fname == "" )
   {
     document.form.Name.focus() ;
  document.getElementById("errorBox").innerHTML = "enter the first name";
     return false;
   }
 if( lname == "" )
   {
     document.form.LastName.focus() ;
   document.getElementById("errorBox").innerHTML = "enter the last name";
     return false;
   }
   
   if (femail == "" )
 {
  document.form.Email.focus();
  document.getElementById("errorBox").innerHTML = "enter the email";
  return false;
  }else if(!emailRegex.test(femail)){
  document.form.Email.focus();
  document.getElementById("errorBox").innerHTML = "enter the valid email";
  return false;
  }
  
   if (freemail == "" )
 {
  document.form.enterEmail.focus();
  document.getElementById("errorBox").innerHTML = "Re-enter the email";
  return false;
  }else if(!emailRegex.test(freemail)){
  document.form.enterEmail.focus();
  document.getElementById("errorBox").innerHTML = "Re-enter the valid email";
  return false;
  }
  
  if(freemail !=  femail){
   document.form.enterEmail.focus();
   document.getElementById("errorBox").innerHTML = "emails are not matching, re-enter again";
   return false;
   }
  
  
 if(fpassword == "")
  {
   document.form.Password.focus();
   document.getElementById("errorBox").innerHTML = "enter the password";
   return false;
  }
  
   if (fmonth == "") {
        document.form.birthday_month.focus();
  document.getElementById("errorBox").innerHTML = "select the birthday month";
        return false;
     }
  if (fday == "") {
        document.form.birthday_day.focus();
  document.getElementById("errorBox").innerHTML = "select the birthday day";
        return false;
     }
  if (fyear == "") {
        document.form.birthday_year.focus();
  document.getElementById("errorBox").innerHTML = "select the birthday year";
        return false;
     }
  if(document.form.radiobutton[0].checked == false && document.form.radiobutton[1].checked == false){
    document.getElementById("errorBox").innerHTML = "select your gender";
    return false;
   }
  if(fname != '' && lname != '' && femail != '' && freemail != '' && fpassword != '' && fmonth != '' && fday != '' && fyear != ''){
   document.getElementById("errorBox").innerHTML = "form submitted successfully";
   }
    
}




Author
V S NageswaraRao
UI Developer
Hyderabad

HTML 'mailto' with subject and multi-line body example

In this article i am going to explain about HTML mailto link with structured body



mailto link will use the html anchor tag

sample code
<a href="mailto:help@webcodehelpers.com">Send Mail</a>


to use mailto link in advanced we will use the below notions

NotationMeaning  (for understanding purposes)
?Appears just after the email address, separating it from the first name/value pair.
=Separates each name and value, in the form  name=value.
&Separates name/value pairs, as in  name1=value1&name2=value2.
%Precedes an ASCII character code in hexadecimal, in the form  %xx,  as a way of representing that character. For example,  %0A   represents a newline (line feed) character.
+Another way to represent a space. For example, the value  Bjorn Free  could appear in the URL as   Bjorn+Free.

mailto with cc and bcc - sample code below 

<a  href="mailto:help@webcodehelpers.com?CC=mail1@example.com&BCC=mail2@example.com&Subject=Mail%20with%20CC%20and%20BCC">Send Mail</a>


Live Demo : Send Mail

mailto with subject - sample code below 

<a href="mailto:help@webcodehelpers.com?Subject=Code Help" target="_top">
Send Mail</a>


Live Demo : Send Mail

mailto with subject and body  - sample code below


<a href="mailto:help@webcodehelpers.com?Subject=Code Help&body=Mail Body" target="_top">
Send Mail</a>


Live Demo : Send Mail

the above two scenarios will work for us all most , but some times we need to send the structured  body data like below

Hello "Name" We are very happy for visiting our website webcodehelpers.com portal, which is providing useful information , code snippets and live examples. We also providing Interview tip to all the freshers in web development and experienced people also Thanks, WebCodeHelpers.com Team
To achieve the above scenarios we need to use the HTML URL Encoding References
HTML URL Encoding References for Space  == %20
HTML URL Encoding References for New Line (Line Feed)  == %0A

mailto with subject and structured body sample code

<A HREF="mailto:help@webcodehelpers.com?Subject=Help&Body=Hello%20%22Name%22%0A%0AWe%20are%20very%20happy%20for%20visiting%20our%20website%20webcodehelpers.com%20portal%2C%20which%20is%20providing%20useful%20information%20%2C%20code%20snippets%20and%20live%20examples.%0A%0AWe%20also%20providing%20Interview%20tip%20to%20all%20the%20freshers%20in%20web%20development%20and%20experienced%20people%20also%0A%0A%0AThanks%2C%0AWebCodeHelpers.com%20Team">Check Mail</A>


Live Demo  : Check Mail


* Please Like page to promote us
* Please leave your feedback as comments

What is my ip address



Detecting Your system Ip address, it will take few seconds Please wait ......




Get system IP Address and More info using javascript / Jquery Code with Example and Live Demo


Get system IP Address and info using javascript / Jquery

we used to work on User based applications all the time, we will have a requirement to capture the customer details  like

Customer IP Address
Customer Country Name
Customer City
Customer TimeZone
Customer Latitude
Customer Longitude

Rendering Live Demo using javascript in Process......



Here i am using javascript and  trying to get all the above details using a third party REST API

Third Party REST API : 

http://smart-ip.net/geoip-json


Using Javascript to fetch the customer system details

Javascript Code :
<script type="text/javascript">
    window.onload = function () {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://smart-ip.net/geoip-json?callback=apiResponse";
        document.getElementsByTagName("head")[0].appendChild(script);
    };
    function apiResponse(response) {
        document.getElementById("ipaddress").innerHTML = "Your IP Address is : " + response.host;
        document.getElementById("language").innerHTML = "Your language : " + response.lang;
        document.getElementById("countryName").innerHTML = "Your Country Name : " + response.countryName;
        document.getElementById("city").innerHTML = "Your City is : " + response.city;
        document.getElementById("latitude").innerHTML = "Your latitude is : " + response.latitude;
        document.getElementById("longitude").innerHTML = "Your longitude is : " + response.longitude;
        document.getElementById("timezone").innerHTML = "Your timezone is : " + response.timezone;
    }
</script>


Complete HTML Code :

<!doctype html>
<html>
<head>
<title>System IP Address</title>
<script type="text/javascript">
   window.onload = function () {
       var script = document.createElement("script");
       script.type = "text/javascript";
       script.src = "http://smart-ip.net/geoip-json?callback=apiResponse";
       document.getElementsByTagName("head")[0].appendChild(script);
   };
   function apiResponse(response) {
       document.getElementById("ipaddress").innerHTML = "Your IP Address is : " + response.host;
       document.getElementById("language").innerHTML = "Your language : " + response.lang;
       document.getElementById("countryName").innerHTML = "Your Country Name : " + response.countryName;
       document.getElementById("city").innerHTML = "Your City is : " + response.city;
       document.getElementById("latitude").innerHTML = "Your latitude is : " + response.latitude;
       document.getElementById("longitude").innerHTML = "Your longitude is : " + response.longitude;
       document.getElementById("timezone").innerHTML = "Your timezone is : " + response.timezone;
   }
</script>
</head>
<body>
<div id="countryName" style=" color: #5C00FF; font-size: 18px;"></div>
<div id="city" style=" color: #5C00FF; font-size: 18px;"></div>
<div id="timezone" style=" color: #5C00FF; font-size: 18px;"></div>
<div id="ipaddress" style=" color: #5C00FF; font-size: 18px;"></div>
<div id="language" style=" color: #5C00FF; font-size: 18px;"></div>
<div id="latitude" style=" color: #5C00FF; font-size: 18px;"></div>
<div id="longitude" style=" color: #5C00FF; font-size: 18px;"></div>
</body>
</html>




What is my ip address

HTML5 Geolocation API - Showing Map of users location

HTML5 Geolocation API for getting users Map with marker :

in past Article i wrote about the HTML5 Geolocation API in details, check it out in the below link
HTML5 Geolocation API 
In this article i like to show example how we use in realtime for getting map of users location

Your Current Location MAP


Code :

<!doctype html>
<html>
<head>
  <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>

<script type="text/javascript">

function loadYourLocation(){
    if (navigator.geolocation)
      {
      navigator.geolocation.getCurrentPosition(showPosition,showError);
      }
    else{
      document.getElementById('map').html("Geolocation is not supported by this browser.");
    }
}

function showPosition(position){
  var point = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }
function showError(error){

   x = document.getElementById('map');
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}
</script>
</head>
<body>
  <div>
  <a onclick="loadYourLocation();">Check Your Location</a>
</div>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>




Subscribe updates via Email