<form class="needs-validation" novalidate>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="exampleInputEmail1" required>
<div class="invalid-feedback">
<i class="fa-regular fa-circle-xmark"></i> Please provide a valid email address.
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<div class="input-group password-input" id="show_hide_password">
<input type="password" class="form-control" id="exampleInputPassword1" required>
<div class="input-group-addon">
<a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
</div>
</div>
<div class="form-link underline float-right">
<a href="forgotten-password.html">Forgotten password?</a>
</div>
<div class="invalid-feedback">
<i class="fa-regular fa-circle-xmark"></i> Please enter a password.
</div>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<div class="select-wrapper">
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group textarea-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="4" required></textarea>
<div class="invalid-feedback">
<i class="fa-regular fa-circle-xmark"></i> Please provide details of your issue.
</div>
</div>
<div class="form-group">
<label>File upload</label><br/>
<input type="file" name="file" id="file" class="input-file">
<label for="file" class="btn btn-secondary js-labelFile">
<i class="icon fa fa-check"></i>
<span class="js-fileName">Choose a file</span>
</label>
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email address (readonly)</label>
<input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="exampleInputEmail2" placeholder="[email protected]" readonly>
</div>
<div class="form-group mb-54">
<label>Radio buttons</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Third radio (disabled)
</label>
</div>
</div>
<div class="form-group mb-54">
<label>Checkboxes</label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="option1" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
First checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="option2" id="defaultCheck2">>
<label class="form-check-label" for="defaultCheck2">
Second checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="option3" id="defaultCheck3" disabled>
<label class="form-check-label" for="defaultCheck3">
Third checkbox (disabled)
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
//Add disabled class to parent of radios/checkboxes
$('.form-check-input:disabled').each(function(){
$(this).parent().addClass("form-check-disabled");
});
//Validation
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom validation styles
var inputs = document.getElementsByClassName('form-control')
// Loop over each input and watch blur event
var validation = Array.prototype.filter.call(inputs, function(input) {
input.addEventListener('blur', function(event) {
// reset
input.classList.remove('is-invalid')
input.classList.remove('is-valid')
if (input.checkValidity() === false) {
input.classList.add('is-invalid')
}
else {
input.classList.add('is-valid')
}
}, false);
});
}, false);
})();
//Adding the file name to file input on upload
(function() {
'use strict';
$('.input-file').each(function() {
var $input = $(this),
$label = $input.next('.js-labelFile'),
labelVal = $label.html();
$input.on('change', function(element) {
var fileName = '';
if (element.target.value) fileName = element.target.value.split('\\').pop();
fileName ? $label.addClass('has-file').find('.js-fileName').html(fileName) : $label.removeClass('has-file').html(labelVal);
});
});
})();
//For checkboxes and radios - check if the input is checked and add class to parent div
$(document).ready(function () {
$('input').click(function () {
$('input:not(:checked)').parent().removeClass("checkedtest");
$('input:checked').parent().addClass("checkedtest");
});
$('input:checked').parent().addClass("checkedtest");
});
//Hide andshow password functionality
$(document).ready(function() {
$("#show_hide_password a").on('click', function(event) {
event.preventDefault();
if($('#show_hide_password input').attr("type") == "text"){
$('#show_hide_password input').attr('type', 'password');
$('#show_hide_password i').addClass( "fa-eye-slash" );
$('#show_hide_password i').removeClass( "fa-eye" );
}else if($('#show_hide_password input').attr("type") == "password"){
$('#show_hide_password input').attr('type', 'text');
$('#show_hide_password i').removeClass( "fa-eye-slash" );
$('#show_hide_password i').addClass( "fa-eye" );
}
});
});
