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

Post to Facebook Tweet this

<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> </tr> </thead> <tbody> <tr id="infotype0"> <td> <div class="form-group"> <input type="text" name="it[0]" class="form-control" placeholder="IT Field" required="true"> </div> </td> <td> <select class="form-control"> <option>Severity</option> <option>Limited Adverse Effect</option> <option>Serious Adverse Effect</option> <option>Catastrophic Adverse Effect</option> </select> </td> <td> <select class="form-control"> <option>Severity</option> <option>Limited Adverse Effect</option> <option>Serious Adverse Effect</option> <option>Catastrophic Adverse Effect</option> </select> </td> <td> <select class="form-control"> <option>Severity</option> <option>Limited Adverse Effect</option> <option>Serious Adverse Effect</option> <option>Catastrophic Adverse Effect</option> </select> </td> <td><button type="button" class="btn btn-default btn-sm delete"><span class="glyphicon glyphicon-trash"></span></button></td> </tr> <tr id="infotype1"></tr> </tbody> </table> </div> </div> </form> </div><!-- end container --> </body> </html>
.limited { background-color: #fdda7c; } .serious { background-color: #fab567; } .catastrophic { background-color: #f2635d; }
$(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", } } }); if (form.valid() === true){ // Populate the existing "next" row. $('#infotype'+i).html("<td><div class='form-group'><input type='text' class='form-control' name='it[" + i +"]' required='true' placeholder='IT Field'></div></td><td><select class='form-control'><option>Limited Adverse Effect</option><option>Serious Adverse Effect</option><option>Catastrophic Adverse Effect</option></select></td><td><select class='form-control'><option>Limited Adverse Effect</option><option>Serious Adverse Effect</option><option>Catastrophic Adverse Effect</option></select></td><td><select class='form-control'><option>Limited Adverse Effect</option><option>Serious Adverse Effect</option><option>Catastrophic Adverse Effect</option></select></td><td><button type='button' class='btn btn-default btn-sm delete'><span class='glyphicon glyphicon-trash'></span></button></td></tr>"); $('input[name="it['+i+']"]').rules("add", { required: true, messages: { required: "IT Field is required" } }); // Append a new row to `tbody` in the DOM but not displayed in the UI. $('#tab_logic').append('<tr id="infotype'+(i+1)+'"></tr>'); i++; } }); // Delete a row. $('#tab_logic').on('click','.delete',function(){ if(window.confirm("Are you sure ?")) { $(this).parents('tr').remove(); } }); });

Related: See More

Vue Paper Dashboard
Dynamic Sortable Tables
Bootstrap 4 Animated Dynamic Form
Simple Login / Signup form with validation

Questions / Comments: