I'm using the jqBootstrapValidation library to validate forms along with the required and data-validation-required-message properties (displays a custom error message).
It's all working correctly but when I use a select element 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.
You have to change the option value to 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><scriptsrc="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--><formnovalidate><divclass="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>