Tuesday, November 22, 2016

How to set Introduction Tour for controls in Web Application

Today we will learn that how to set up an introduction tour of web application for first time user.

We will use Bootstrap Tour for this purpose. Let’s do it:
Create a folder of any name, say ‘Tour’. Create 2 sub folders inside it of name ‘Content’ and ‘Scripts’.
Put two files inside Content folder - bootstrap.min.css and bootstrap-tour.min.css
Put these files inside Scripts folder - bootstrap.min.js, bootstrap-tour.min.js and jquery-1.10.2.min.js
Actually, creation of above folder is not necessary, you can put the files directly in your folder. It is just for ease of finding files.
Here I am taking three DIVs with separate id and msg. you can take any control as per requirement.
Code is:
<html>
<head>
    <title>Bootstrap Tour </title>
       <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-tour.min.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Content/bootstrap-tour.min.js"></script>
  <script type="text/javascript">
      var tour = new Tour({
          steps: [
          {
              element: "#div1",
              title: "Div First",
              content: "Content of my step-1"
          },
          {
              element: "#div2",
              title: "Div Second",
              content: "Content of my step-2"
          },
          {
              element: "#div3",
              title: "Div Second",
              content: "Content of my step-2"
          }
          ]
      });
      tour.init();

      $(document).ready(function () {
          $('#btnStartTour').click(function () {
              tour.start();
          });
      });
  </script>

</head>
<body>

    <div id="div1" style="border:1px solid blue;width:50%;">
        This is first div description
    </div>
    <br />
    <div id="div2" style="border:1px solid blue;width:50%;">
        This is Second div description
    </div>
    <br />
    <div id="div3" style="border:1px solid blue;width:50%;">
        This is Third div description
    </div>
    <input type="button" id="btnStartTour" value="Start Tour" />

</body>
</html>
Description: btnStartTour  is the id of button upon which we will click to start tour. tour.start(); is used to start the tour.  Please have a look on following figure.



According to the above description, you can add more controls according to your need.

Note: When you will Run this code, the browser saves the details in cache so you will not be able to see tour again. To see tour again, clear the cache of browser then run code again.

For more on Tour, click Here

I hope it will work.

Output screens:
First Time


When click on Start Tour button

When Click on Next Button

Please leave comments or e-mail me for your suggestions, feedback.

My you tube channel videos – Click Here

Happy Coding.

Rudra Pratap Singh
Software Engineer

singhrudrapratap@gmail.com
- No comments:

Thursday, November 3, 2016

How to apply validation for all controls of a form using JQuery

Tags: How to validate control in JQuery, Validation of controls in a form using JQuery, JQuery validation for forms.

Today we are going to code for validation of controls of a form. It very useful when number of controls is not confirmed in the form.
To do this, copy and paste following code in your editor like Notepad, Notepad++ or any other and save file with extension .html.

Code

<!DOCTYPE html>
<html>
<head>
    <title> Validation Testing </title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  
<script type="text/javascript">
$(document).ready(function(){
var common = 0 ;
    $('.validateform').on('submit',function(e){
        firebutton(e)
    });// submit close here

    $('#btnAnother').on('click',function(e){
        firebutton(e)
    });// submit close here

    function firebutton(e){
        common = 0 ;
        $('#ValidationSummary').empty().css('display','none');
            $('.need').each(function(i, j){
               var $this = $(this); //

               if($this.hasClass('text')){
                   text($this);
               }
               if($this.hasClass('radiob')){
                 radio($this)
               }
             });//each close here
            if(common >0){
                $('#ValidationSummary').css('display','block').append(common+' fields are remaining');
                e.preventDefault();
            }
    }

    $('.need').focusin(function(){
        $(this).removeClass('error');
    });
    function text($this){
              if($this.find('input').val().trim() == '' ){
              $this.addClass('error');
             common++;
            }
        }

     function radio($this){
        var holdd = $this.find('input[type="radio"]:checked').length;
            if(holdd!= 0){
            }
            else{
               $this.addClass('error');
                common++;
        }
     }

});

    </script>

    <style>
        ul {
            list-style: none;
        }

        .error input {
            border: 2px solid red;
            color: red;
        }

        .error2 {
            color: red;
        }
    </style>


</head>
<body>

    <form class="validateform">
        <div id="ValidationSummary" class="error2" style="display:none"></div>
        <table>
            <tr class="need text">
                <td>Name :</td>
                <td><input type=text /></td>
            </tr>
            <tr>
                <td>Pet Name :</td>
                <td><input type=text /></td>
            </tr>
            <tr class="need text">
                <td>Father Name :</td>
                <td><input type=text /></td>
            </tr>
            <tr class="need text">
                <td>Address :</td>
                <td><input type=text /></td>
            </tr>
            <tr class="need radiob">
                <td>Gender :</td>
                <td><input type="Radio" /> Male <input type="Radio" /> FeMale</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><input type="submit" value="Click" /></td>
            </tr>

        </table>

    </form>

</body>
</html>
What are we doing in this code?
We are checking the controls for validations by using loop. To achieve this, we have decorated the controls with two class, i.e., need and text. ‘need’ class is used to check that in which code validate is to apply. If you see we didn’t use this class for Pet Name control. Because we don’t want to apply validation for that control. ‘text’ class is used to specify that the control is a Textbox. For radio button control we used ’radiob’ class.
In the above code, we are calling a function of name ‘firebutton’. I have called this function twice here :
$('.validateform').on('submit',function(e)
And
$('#btnAnother').on('click',function(e)
First calling for submit button click and second calling is for any button click by using that button’s id. Second calling is for your experience, I am not using it in this code.
In function ‘firebutton’, there is a variable of name ‘common’. It is acting as a flag. It is zero by default and its value will increase if validation error is found.
We are executing a loop for those controls which are having class name – need. Inside the loop we are checking that if the control has any class of name text or radiob, It checks that it is filled/checked or not, if finds error it applies the ‘error’ class to control.
In the last of code, we check that common variable is greater than zero or not, if it is greater than zero means error is present, it will not load the form.
We have created a div of name ValidationSummary, which is used to show validation message. You can remove it as per requirement.
Points to remember
·         Don’t forget to add reference of JQuery File.
·         Add class to the controls for which you have to apply validation.
Demo Images:
When form loads


When click on Click button

 
When one Validation field is filled and another are empty
Happy Coding.
Rudra Pratap Singh
Software Engineer


- No comments:
Subscribe to: Posts (Atom)

How to Get Organic Views on Your Channel/Content

 Hi Friends, This post will be very short and specific in the information.  If you are a content creator and want some help in getting organ...