"Bootstrap CRUD with dynamic validation"
Bootstrap 3.3.0 Snippet by SFDCACE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>CRUD with Validation</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.js"></script>
</head>
<body>
<div class="container">
<form id="myform">
<div class="row clearfix">
<div class="col-md-12 column">
<button id="add-row" type="button" class="btn btn-primary btn-md left-block">
<span class="glyphicon glyphicon-plus"></span> Add Line Item
</button>
<table class="table table-bordered table-hover table-striped" id="tab_logic">
<thead>
<tr>
<th class="text-center">
IT Field
</th>
<th class="text-center">
Confidentiality
</th>
<th class="text-center">
Integrity
</th>
<th class="text-center">
Availability
</th>
<th></th>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
.limited {
background-color: #fdda7c;
}
.serious {
background-color: #fab567;
}
.catastrophic {
background-color: #f2635d;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
// Counter
var i = 1;
// Add a row.
$("#add-row").click(function(){
var form = $("#myform");
form.validate({
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
rules: {
"it[0]":{
required: true,
}
},
messages: {
"it[0]": {
required: "IT Field is required",
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: