Form Validation using Jquery

Form Validation using Jquery

<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> </head>

We will see the Jquery validation for below sample form.

form validation
HTML:
Required HTML codes for above form design.


<form>
<input name="firstname" type="text" value="firstname" />
<input name="lastname" type="text" value="lastname" />
<input name="email" type="email" value="email" />
<input type="button" value="submit" />
</form>
 

Add below CSS to differentiate the validation messages.

CSS:


.error { 
border: 1px solid #b94a48; 
background-color: #fee; 
}
 

Script:


$(document).ready(function(){
  $(function() {
  // Setup form validation on the #register-form element
 $("#register-form").validate({   //#register-form is form id
     // Specify the validation rules
rules: {
         firstname: "required", //firstname is corresponding input name
         lastname: "required",  //lastname:  is corresponding input name
         email: {               //email is corresponding input name
             required: true,
             email: true
         },
     },
     // Specify the validation error messages
messages: {
         firstname: "Enter First Name",
         lastname: "Enter Last Name",
         email: "Enter Valid Email ID",
         agree: "Please accept our policy"
     },
     submitHandler: function(form) {
         form.submit();
     }
 });

  });
})
 

Explanation:
By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.

Continue Reading

Adding tooltip on hovering html element.

Implement tooltip when hovering element

We can implement tooltip by using below script.

Script:


//append tooltip
          jQuery('li .helptext').hover(function(){
             // Hover over code
                   var title = $(this).attr('alt');           
                   jQuery('
').text(title).appendTo('body').fadeIn('slow');
          }, function() {
                   // alert('test');
// Hover out code
jQuery('.tooltip').remove();
          }).mousemove(function(e) {
                   var mousex = e.pageX + 20; //Get X coordinates
                   var mousey = e.pageY + 10; //Get Y coordinates
                   jQuery('.tooltip')
                   .css({ top: mousey, left: mousex })
          });           
          //tooltip end

Note:

Update the selector name based on your class name or id name.

CSS:


.tooltip {
          height:50px;
          color:#fff;
          position:absolute;
          border:1px solid #333;
          background:#333;
          border-radius:5px;
          padding:10px;
          font-size:12px;
          width: 250px;
          z-index: 999999;
          opacity: 1 !important;
}
.helptext {cursor:help;}
Continue Reading

Change the background color of odd and even row of accordions

Change the background color for odd and event panel of accordion

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
    $('.panel-group > .panel-default:even').addClass('even');
    $('.panel-group > .panel-default:odd').addClass('odd');
});

Explanation:
By using odd and even classes we can set the required background color using CSS.

Continue Reading

Browser feature detection using Modernizr

Browser feature detection using Modernizr Plugin

Before discussing about runtime approach using modernizr, we will see couple of browser based approach.

  • Caniuse.com
  • Html5test.com

These websites are useful to identify the browser supports for HTML5 features and related specifications.

Modernizr

Modernizr is ajavascript library. It detects either user browser is supporting HTML and CSS3 features or not. It is very useful to detecting HTML5 and CSS3 features Using this feature detection support, developers can try some alternative approaches to implement the same kind of feature in that unsupported browsers.

First we should embed the Modernizr js file in head section.


<script src="modernizr.js"></script>

To check video feature support in different browsers, we can use the following script.


//Example 1:
if(Modernizr.video == false)
{
//alert("Browser doesn't support HTML5 Video");
}

//Example 2:
To check camvas feature support in different browsers, we can use the following script.
if("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    // show the location on a map by using the Google Maps API
  });
} else {
  // showing static map image
}


Continue Reading

Drag and Drop feature using HTML5 API

Drag and Drop feature implementation

We should use html event attributes like ondragover, ondrop and ondragstart to achieve drag and drop feature.

HTML5:


<div draggable = "false">
<!-- ondragover event: Specifies where the dragged data can be dropped -->
<!-- ondrop event: When the dragged data is dropped, a drop event occurs -->
<div id="div1" 
             style="width: 300px; height: 300px; padding: 10px; border: 1px solid #FF4500;"
             ondragover="allowDrop(event)" 
             ondrop="drop(event)"
             draggable = "false">
</div>
<!--ondragstart = Specify what should happen when the element is dragged -->
<img 
             id="drag1" src="HTML5.jpg" 
             draggable="true" 
             ondragstart="drag(event)" 
    width="204" height="204" />
</div>

Script:


        function drag(event){
         // set the target element
            event.dataTransfer.setData("ControlID", event.target.id); 
        }
        function allowDrop(event){
            //To allow a drop, we must prevent the default handling of the element
            event.preventDefault();
        }
        function drop(event){
            //To allow a drop, we must prevent the default handling of the element
        event.preventDefault();
         // append drag element in to drop area
            var controlId = event.dataTransfer.getData("ControlID");
            event.target.appendChild(document.getElementById(controlId));
        }

Explanation:

  • ondragover event: It specifies when an element is dragged over a drop target.
  • ondrop event: When the dragged data is dropped, a drop event occurs.
  • Ondragstart: It specify what should happen when the element is dragged.
  • event.preventDefault() – Prevent the default behavior of an element.
Continue Reading

Custom design for select box using CSS

Custom select box design using CSS

We can develop custom select box design using CSS and Script. Here we will see the CSS based implementation.

HTML


  <div class="select-style">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:


.select-style {
 padding: 0;
 margin: 0;
 border: 1px solid #ccc;
 width: 197px;
 overflow: hidden;
 height: 30px;
 background: url("../images/dropdown.png") no-repeat right center #fff; //Set the image path of dropdown icon design
}
.select-style select {
 padding: 0 3px;
 width: 108% !important;
 border: none;
 box-shadow: none;
 background-color: transparent;
 background-image: none;
}
.select-style select:focus {
 outline: 0;
}

Note: Wrap a Div section with a class name “select-style”on the select field.

Continue Reading

Custom radio button & custom checkbox styling using CSS

Custom radio and custom checkbox design using CSS

We are hiding default form element using CSS. The “for” attribute specifies which form element is bound to the label. So, label will act as an input element. “Id” name of the form element and “for” attribute name should be same.

I have used images for active & inactive mode. Instead of images we can use font-awesome.

HTML:


//Custom radio button
<input id="apple" name="fruits" type="radio" />
<label for="apple">
<img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" /> //Inactive image
<img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" />  //Active image
</label>
//Custom checkbox 
<input id="fruits" name="fruits" type="checkbox" />
<label for="fruits">
<img class="offradio" height="20" src="images/form_box-off.png" width="20" />
<img class="onradio" height="20" src="images/form_box-on.png" width="20" />
</label>

CSS:


input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio{
 display: block;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label .onradio,
input[type="checkbox"] + label .onradio {
display: none;
}
/* Styling the "check" status */
input[type="radio"]:checked + label .onradio,
input[type="checkbox"]:checked + label .onradio {
display: block;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio {
display: none;
}
Continue Reading

How can do a PSD to HTML conversion?

PSD to HTML conversion

First of all we should know about basic HTML and CSS (HTML5 and CSS3). Javascript & Jquery also used for creating interactions between the web page and user.

Now we are living in the smart world, so our website should be fit with all kind of devices. We can create Responsive websites by using media queries, bootstrap and foundation.

Following points we have to focus when doing HTML conversion:

  • Pixel perfect User Interface Development using HTML and CSS.
  • Cross browser compatibility check & cross platform support.
  • Responsiveness for all kind of devices by using Media Queries.
  • SEO friendly codes.
  • User Accessibility check.
  • Code Validation Check, Code Review and Code Minification.
Continue Reading

How can create a responsive web design?

Responsive Design

We can develop responsive webpage by using following ways.

  1. Media queries
  2. Responsive frameworks like Bootstrap and Foundation.

Media Queries Example:

To write CSS codes for accepting in mobile view only:


@media (max-width: 767px){
//CSS declarations
}

To write CSS codes for accepting in tablet view only:


@media (min-width: 768px) and (max-width: 1024px){
// CSS declarations
}

To write CSS codes for accepting in desktop view only:


@media (min-width: 1200px){
// CSS declarations
}

Some of Device Resolutions:

  • 768px – IPad portrait
  • 1024px – Ipad Landscape
  • 375px – Iphone6 Portrait or latest mobile devices
  • 360px – Some android phones
  • 320px – IPhone5 Portarit
  • 1280, 1366+ – desktop resolutions

Responsive design using CSS Frameworks (Bootstrap / Foundation):

This is like plug and play type. They have already predefined the required classes and components for responsiveness. We can use those class names and UI components for achieving responsiveness with minimal efforts.

Continue Reading