Conditions for form using bootstrap 4

Question

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 to appear radio every time you check the "Controlled" option or when you check "Restricted".

Another detail I wanted to know is if you have a password validation and password confirmation using Bootstrap 4 ? As you can see I had to declare oninput on the tag form to make this validation, but it does not display the message I put "Passwords do not match".

How do I do it ?

Answer 1

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 the parent class . was-Validated, usually applied to ;
  • 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 sending, via AJAX, for example), remove the class. was-Validated do , after each shipment; -As a fallback, the classes is-invalid and . is-Valid can be used instead of the pseudo-classes for server side validation;
  • They don’t require a parent class. was-Validated.
• Due to the limitations of CSS, we cannot (at the moment) apply styles in one that comes before a form field (in 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 patterns (different in each and unstyled, via CSS) or our custom feedback styles, 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 standards.

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>