forked from stevenmills/bootstrapvalidator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdynamic2.html
131 lines (119 loc) · 5.13 KB
/
dynamic2.html
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="page-header">
<h2>Dynamic fields</h2>
</div>
<form id="contactForm" method="post" class="form-horizontal" action="target.php">
<div class="form-group">
<label class="col-lg-3 control-label">Phone number</label>
<div class="col-lg-6">
<input class="form-control" type="text" name="phone" />
</div>
<div class="col-lg-3">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add more <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#" class="addPhoneButton" data-name="phone_iphone">iPhone</a></li>
<li><a href="#" class="addPhoneButton" data-name="phone_home">Home</a></li>
<li><a href="#" class="addPhoneButton" data-name="phone_office">Office</a></li>
</ul>
</div>
</div>
</div>
<!-- Template for dynamic field -->
<div class="form-group" id="template" style="display: none;">
<label class="col-lg-3 control-label"></label>
<div class="col-lg-6">
<input class="form-control" type="text" />
</div>
<div class="col-lg-3">
<button type="button" class="btn btn-link removeButton">Remove</button>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.addPhoneButton').on('click', function() {
var $that = $(this),
$template = $('#template'),
$newRow = $template.clone().removeAttr('id').insertBefore($template).show();
$that.parent().addClass('disabled');
// Set the label and field name
var fieldName = $that.attr('data-name');
$newRow
.find('.control-label')
.html($that.html())
.end()
.find('input')
.attr('name', fieldName)
.end()
.on('click', '.removeButton', function() {
// Remove field when clicking the Remove button
$('#contactForm').bootstrapValidator('removeField', fieldName);
// Enable the Add button
$that.parent().removeClass('disabled');
// Remove element
$newRow.remove();
});
// Add new field
$('#contactForm').bootstrapValidator('addField', fieldName, {
message: 'The phone number is not valid',
validators: {
digits: {
message: 'The value can contain only digits'
}
}
});
});
$('#contactForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
phone: {
message: 'The phone number is not valid',
validators: {
notEmpty: {
message: 'The phone number is required'
},
digits: {
message: 'The value can contain only digits'
}
}
}
}
})
.on('error.field.bv', function(e, data) {
console.log(data.field, data.element, '-->error');
})
.on('success.field.bv', function(e, data) {
console.log(data.field, data.element, '-->success');
});
});
</script>
</body>
</html>