Monday, September 18, 2017

Form validation using JavaScript with bootstrap alert messages

In html page you can set the bootstrap messages, that can be shown and hide using JavaScript. On alert message put a css class that does not display when the page is loaded and by using the validation rules get the text from text box in JavaScript and shown hide messages as you need.

If name and father name is missing than it shown alert message in red color. If name and father name is present it shows success message in green color.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
  <script>
function validate() {
var name = document.getElementById("name").value;
var fname = document.getElementById("fname").value;
$("#fname-alert").hide();
$("#name-alert").hide();
$("#success-message").hide();
//var message = "";
if(name.trim() == "") {
//message = "Your name required ";
//document.getElementById("message-name").innerHTML = message;
$("#name-alert").show();
}
if(fname.trim() == "") {
//message = " Father name required ";
//document.getElementById("message-fname").innerHTML = message;
$("#fname-alert").show();
}
if(name.trim() != "" && fname.trim() != "") {
//document.getElementById("message").innerHTML = "Student Information is saved...";
$("#success-message").show();
}
}

  </script>
  <style>
.alert{
display: none;
padding: 5px;
margin-top: 25px;
border: 1px solid transparent;
border-radius: 4px;
}

  </style>
</head>
<body>

<div class="container">
    <div class="alert alert-success alert-dismissable" id="success-message">
          <p id="message"> Student Information is saved...</p>
    </div>
  <div class="row-fluid">
  <div class="col-sm-12 col-md-12 col-lg-12"><h2>Student Information</h2></div>
  </div>
  <div class="row-fluid">
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name">
</div>
</div>
<div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="alert alert-danger alert-dismissable" id="name-alert">
 <p id="message-name">Name is Required</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="form-group">
<label for="fname">Father Name:</label>
<input type="text" class="form-control" id="fname">
</div>
</div>
<div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="alert alert-danger alert-dismissable" id="fname-alert">
 <p id="message-fname"> Father Name is Required</p>
</div>
</div>
</div>

  </div>
<div class="clearfix"></div>
<div class="row-fluid">
<div class="col-md-12 col-sm-12 col-lg-12 ">
<div class="separator"> </div>
</div>
</div>
  <div class="row-fluid">
<div class="col-md-12 col-sm-12 col-lg-12 ">
<input type="button" class="btn" name="btn" value="Validate" onClick="validate()">
</div>
  </div>
 
</div>
</body>
</html>

Posted by at No comments:
Labels: ,

Tuesday, September 5, 2017

Dynamically add row inside bootstrap table using JavaScript

Create a bootstrap table using html with table head and table body. Now create an other table that is hidden (not shown on user interface) with table row and table data. Get hidden table's table row using java script change the id's value at run time using counter variable and than append that row inside your main table (in which you want to add row).

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <script>
function addUserRow() {
var counter = 1;
var tableRow = $("#user-detail-table").find(".user-first-row").clone();
tableRow.addClass("user-first-row"+counter);
tableRow.attr("id", "active-user-row"+counter);
var userName = tableRow.find("#user-name0");
userName.attr("id", "user-name"+counter);
var lastName = tableRow.find("#last-name0");
lastName.attr("id", "last-name"+counter);
var email = tableRow.find("#email0");
email.attr("id", "email"+counter);
var mainTable = $("#student-table");
mainTable.append(tableRow);
}

  </script>

</head>
<body>

<div class="container">
  <h2>Student Table</h2>
  <p>Add Dynamic Row in table</p>          
  <table class="table" id="student-table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
   
    </tbody>
  </table>
  <input type="button" class="btn" name="btn" value="Add Row" onClick="addUserRow()">
</div>
<table id="user-detail-table" class="table" style="display:none">
<tr id="active-user-row0" class="user-first-row">
<td><input class="form-control" type="text" id="user-name0"></td>
<td><input class="form-control" type="text" id="last-name0"></td>
<td><input class="form-control" type="text" id="email0"></td>
</tr>
</table>

</body>
</html>

Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)