Conditions for form using bootstrap 4
How do I create a condition in a form using Bootstrap 4 ?
I have the following Form:
<form id="createusers" class="needs-validation" oninput='userrepassword.setCustomValidity(userrepassword.value != userpassword.value ? "Senhas não conferem." : "")' novalidate>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-user-circle-o"></i>
</div>
</div>
<input id="username" name="username" placeholder="Usuário" type="text" aria-describedby="usernameHelpBlock" required="required" class="form-control">
<!-- <label for="username">Digite um nome de usuário</label> -->
<div class="invalid-feedback">Por favor, digite um nome de usuário válido.</div>
</div>
<small id="usernameHelpBlock" class="form-text text-muted">Digite um nome de usuário.</small>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-lock"></i>
</div>
</div>
<input id="userpassword" name="userpassword" placeholder="Senha" type="password" required="required" class="form-control" aria-describedby="userpasswordHelpBlock">
<!-- <label for="userpassword">Digite uma senha para o usuário. Sua senha deve ter no mínimo 6 caracteres.</label> -->
<div class="invalid-feedback">Por favor, digite uma senha.</div>
</div>
<small id="userpasswordHelpBlock" class="form-text text-muted">Digite uma senha para o usuário. Sua senha deve ter no mínimo 6 caracteres.</small>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fa fa-lock"></i>
</div>
</div>
<input id="userrepassword" name="userrepassword" placeholder="Confirme a senha" type="password" required="required" class="form-control" aria-describedby="userrepasswordHelpBlock">
<!-- <label for="userrepassword">Confirme a senha.</label> -->
<div class="invalid-feedback">Por favor, confirme a senha.</div>
</div>
<small id="userrepasswordHelpBlock" class="form-text text-muted">Confirme a senha.</small>
</div>
<div class="form-group">
<label>Informe o grupo do usuário</label>
<div>
<div class="custom-control custom-radio">
<input name="usergroup" id="usergroup_0" type="radio" aria-describedby="usergroupHelpBlock" required="required" class="custom-control-input" value="neg">
<label for="usergroup_0" class="custom-control-label">Negado</label>
</div>
<div class="custom-control custom-radio">
<input name="usergroup" id="usergroup_1" type="radio" aria-describedby="usergroupHelpBlock" required="required" class="custom-control-input" value="tot">
<label for="usergroup_1" class="custom-control-label">Total</label>
</div>
<div class="custom-control custom-radio">
<input name="usergroup" id="usergroup_2" type="radio" aria-describedby="usergroupHelpBlock" required="required" class="custom-control-input" value="controlado">
<label for="usergroup_2" class="custom-control-label">Controlado</label>
</div>
<div class="custom-control custom-radio">
<input name="usergroup" id="usergroup_3" type="radio" aria-describedby="usergroupHelpBlock" required="required" class="custom-control-input" value="restrito">
<label for="usergroup_3" class="custom-control-label">Restrito</label>
</div>
<div class="custom-control custom-radio">
<input name="usergroup" id="usergroup_4" type="radio" aria-describedby="usergroupHelpBlock" required="required" class="custom-control-input" value="lib">
<label for="usergroup_4" class="custom-control-label">Liberado</label>
</div>
<div class="custom-control custom-radio">
<input name="usergroup" id="usergroup_5" type="radio" aria-describedby="usergroupHelpBlock" required="required" class="custom-control-input" value="noc">
<label for="usergroup_5" class="custom-control-label">No Cache</label>
<div class="invalid-feedback">Por favor, selecione uma opção para informar o grupo do usuário.</div>
</div>
<small id="usergroupHelpBlock" class="form-text text-muted">Informe o grupo do usuário.</small>
</div>
</div>
<div class="form-group">
<button name="submitcreateuser" type="submit" class="btn btn-primary">Criar Usuário</button>
</div>
</form>
I needed another radio to appear every time I checked the "controlled" option or when I checked "restricted".
Another detail I wanted to know is if you have how to do a password validation and password confirmation using Bootstrap 4 ? As you can see I had to declare the oninput in the form tag to do this validation, but it does not display the message I put "passwords do not check".
How do I do this ?
1
Author: Kayo Bruno, 2019-08-25
1 answers
Rooh, using BootStrap 4.
Come on:
Validation:
Here's how Form validation works, Using Bootstrap:
- HTML Form validation is applied using two CSS pseudo-classes:: invalid and: valid;
- it is applied in , and .
- Bootstrap limits the scope of: invalid and: valid to the pai class .was-validated, usually applied in ;
- otherwise, any required field without a value will be shown as invalid when loading the page;
- thus, you can choose when to activate them (typically, after Form Submission). -To reset the appearance of the form (in the case of dynamic data submission, via AJAX, for example), remove the class .was-validated do, after each submission; - As a fallback, the is-invalid and .is-valid classes can be used, rather than the pseudo-classes for server side validation;
- do not require a parent class .was-validated.
- due to CSS limitations, we cannot (at the moment) apply styles to one that comes before a form field (in the DOM), without the help of JavaScript;
- all modern browsers support the constraint validation API, a series of JavaScript methods for validating form fields;
- feedback messages can use browser defaults (different in each and non-stylizable, via CSS) or our feedback styles custom, with extra HTML and CSS;
- you can provide custom validation messages with setCustomValidity, in JavaScript.
With this in mind, pay attention to the following demonstrations of our custom form validation styles, optional server-side classes, and browser patterns.
A practical example:
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validationCustom01">Primeiro nome</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="Nome" value="Mark" required>
<div class="valid-feedback">
Tudo certo!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustom02">Sobrenome</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Sobrenome" value="Otto" required>
<div class="valid-feedback">
Tudo certo!
</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationCustomUsername">Usuário</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Usuário" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Por favor, escolha um nome de usuário.
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Cidade</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="Cidade" required>
<div class="invalid-feedback">
Por favor, informe uma cidade válida.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">Estado</label>
<input type="text" class="form-control" id="validationCustom04" placeholder="Estado" required>
<div class="invalid-feedback">
Por favor, informe um estado válido.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">CEP</label>
<input type="text" class="form-control" id="validationCustom05" placeholder="CEP" required>
<div class="invalid-feedback">
Por favor, informe um CEP válido.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Concordo com os termos e condições
</label>
<div class="invalid-feedback">
Você deve concordar, antes de continuar.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Enviar</button>
</form>
<script>
// Exemplo de JavaScript inicial para desativar envios de formulário, se houver campos inválidos.
(function() {
'use strict';
window.addEventListener('load', function() {
// Pega todos os formulários que nós queremos aplicar estilos de validação Bootstrap personalizados.
var forms = document.getElementsByClassName('needs-validation');
// Faz um loop neles e evita o envio
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>