How to use required in select in jqBootstrapValidation validated form?

Asked

Viewed 1,761 times

1

I’m using the library jqBootstrapValidation to validate forms along with properties required and data-validation-required-message (displays a custom error message).

Everything is working properly but when I use an element select it does not work even if the value in the field is not selected, it does not validate allowing the user to send the default value, eg: Select.

twitter-bootstrap form validation jquery-validate

  • Fernando, could you put an example of the problem? you can use jsfiddle or the stackoverflow tool itself to put the code.

1 answer

1

You have to change the value of option for empty (value="").

Functional example

$(function() {

  $("input,textarea,select").jqBootstrapValidation({
    preventSubmit: true,
    submitSuccess: function($form, event) {
      alert("OK");
      event.preventDefault();
    }
  });

});
<link rel="stylesheet" href="https://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jQuery-1.7.2-min.js"></script>
<script src="https://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>

<!-- Formulário -->

<form novalidate>
  <div class="control-group">
    <label class="control-label" for="email">Estado:</label>
    <div class="controls">
      <select id="cbEstado" required data-validation-required-message="Por favor, selecione um estado." required>
        <option value="">-- selecione um item --</option>
        <option value="saopaulo">São Paulo</option>
        <option value="riodejaneiro">Rio de Janeiro</option>
      </select>
    </div>
  </div>
  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Enviar <i class="icon-ok icon-white"></i>
    </button>
  </div>
</form>

Source: Validate that a select field has been set

Browser other questions tagged twitter-bootstrap form validation jquery-validate

You are not signed in. Login or sign up in order to post.