I've successfully implemented a bootstrap validation form that changes the inputField color based on error and success states.
However, I'm facing an issue with changing the text-color and border-color of the Label element. I've tried various JavaScript solutions but none seem to work for me as I'm not well-versed in javascript.
HTML
<form action="" class="form-horizontal form-bordered storyForm" novalidate>
<div class="form-body">
<div class="form-group" id="form-group">
<div class="controls">
<label class="control-label" id="label" for="email">Email</label>
<input type="email" id="email" class="form-control" name="email" required data-validation-required-message="This field is required">
</div>
</div>
<div class="form-group" id="form-group">
<div class="controls">
<label class="control-label" id="label" for="password">Password</label>
<input type="password" id="password" class="form-control" name="password" required data-validation-required-message="This field is required">
</div>
</div>
</div>;
<div class="form-actions">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="offset-sm-3 col-md-9">
<button type="submit" id="submit" class="btn btn-success"> <i class="fa fa-check"></i> Submit</button>
<button type="button" class="btn btn-inverse">Cancel</button>
</div>
</div>
</div>
</div>
</div>
CSS
form.storyForm label{
padding: 0px 25px;
/* background-color: rgba(0,0,0,.15); */
color: #000;
border-radius: 4px 4px 0px 0px;
border: 1px solid rgba(0,0,0,.15);
border-bottom: 1px solid white !important;
top: 1px;
position: relative;
}
form.storyForm label.error{
padding: 0px 25px;
/* background-color: rgba(0,0,0,.15); */
color: #ef5350;
border-radius: 4px 4px 0px 0px;
border: 1px solid #ef5350;
border-bottom: 1px solid white !important;
top: 1px;
position: relative;
}
form.storyForm label.validate{
padding: 0px 25px;
/* background-color: rgba(0,0,0,.15); */
color: #26dad2;
border-radius: 4px 4px 0px 0px;
border: 1px solid #26dad2;
border-bottom: 1px solid white !important;
top: 1px;
position: relative;
}
The JavaScript code snippet I'm using to toggle classes
<script>
$(document).ready(function() {
$("#submit").click(function() {
if ($("#form-group").hasClass("error")) {
$("#label").addClass("error");
} else if ($("#form-group").hasClass("validate")) {
$("#label").removeClass("error");
$("#label").addClass("validate");
}
});
});
</script>
I have also attempted using class selectors without success
<script>
$(document).ready(function() {
$("#submit").click(function() {
if ($(".form-group").hasClass("error")) {
$(".control-label").addClass("error");
} else if ($("#form-group").hasClass("validate")) {
$(".control-label").removeClass("error");
$(".control-label").addClass("validate");
}
});
});
</script>