Validating select with jquery.validate

Question

I am creating an application form where there are some selects, as course choice and date of birth, I would like to know how to make mandatory the user select something using this library jquery.validate

<select name="cursos_categoria" id="cursos_categoria">
  <option>Selecione a categoria de cursos</option>
  <option value="Imersão">Imersão</option>
  <option value="Aperfeiçoamento">Aperfeiçoamento</option>
  <option value="Especialização">Especialização</option>
  <option value="Superior">Superior</option>
  <option value="Outros">Outros</option>
</select>

Answer 1

Sérgio, to use jquery.validate is very simple, you just need to include the required class in your element and js to call the plugin by passing the selector that is your form.

Example:

<form id="registerForm">
  <select name="cursos_categoria" id="cursos_categoria" class='required'>
    <option value="">Selecione a categoria de cursos</option>
    <option value="Imersão">Imersão</option>
    <option value="Aperfeiçoamento">Aperfeiçoamento</option>
    <option value="Especialização">Especialização</option>
    <option value="Superior">Superior</option>
    <option value="Outros">Outros</option>
  </select>
</form>

And then:

 $("#registerForm").validate();

Note the following, your first option is being understood as a valid option, for you to make the plugin understand that this option is only informative put the value attribute and leave without any value.

See working on jsfiddle

Answer 2

Use the following code

Reference Bootstrap 4 Follows your form:

                <div class="form-row">
                    <div class="form-group col-md-4">
                        <label for="txtDataInicio">Data Início:</label>
                        <select name="cursos_categoria" id="cursos_categoria">
                            <option>Selecione a categoria de cursos</option>
                            <option value="Imersão">Imersão</option>
                            <option value="Aperfeiçoamento">Aperfeiçoamento</option>
                            <option value="Especialização">Especialização</option>
                            <option value="Superior">Superior</option>
                            <option value="Outros">Outros</option>
                        </select>
                    </div>
                </div>

Using the jquary framework. Validate, create the following JS script:

$(function () {
   $.validator.addMethod(
       "Curso",
       function (value, element) {
           if ($("#cursos_categoria").val() === "") {
               return false;
           } else {
               return true;
           }
       }
   );

   $("#idFormulario").validate({
            onfocusout: function (e) {
                this.element(e);
            },
            onkeyup: false,
            highlight: function (element) {
                $(element).closest(".form-control").addClass("is-invalid");
            },
            unhighlight: function (element) {
                $(element).closest(".form-control").removeClass("is-invalid");
                $(element).closest(".form-control").addClass("is-valid");
            },
            errorElement: "div",
            errorClass: "invalid-feedback",
            errorPlacement: function (error, element) {
                if (element.parent(".input-group-prepend").length) {
                    $(element).siblings(".invalid-feedback").append(error);
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                'Curso': {
                    required: true
                }
            },
            messages: {
                'Curso': {
                    required: "Selecione o Curso!"
                }
            }

        });

});

Following link of reference: https://coderanch.com/t/554835/languages/jQuery-Validator-select

For all this to work you need to have Jquary Validate references you can consult the following link Jqueryvalidate

Answer 3

use the following code:

https://jsfiddle.net/7xhgjtag/

<form method="post" action="" id="myform">
  <select name="listaopt" id="OptList">
    <option value="selecione...">selecione</option>
    <option value="option 1">option 1</option>
    <option value="option 2">option 2</option>
    <option value="option 3">option 3</option>
    <option value="option 4">option 4</option>
  </select>
  <br>
  <br>
  <input type="submit" value="enviar">
</form>

JS:

$('#myform').validate({
  rules: {
    listaopt: {
      required: true
    }
  }
});

you can find this in the documentation: http://jqueryvalidation.org/required-method