Validate a select2 field with jquery-validate

Question

Validate a select2 field with jquery-validate

Navigation

#1 by (7 votes)
#2 by (4 votes)
#3 by (2 votes)

6

good I have a form in which through a query from php to my bd I charge a select, in which I use the select2 library to be able to search in my registers .. my problem is that when validating this field with jquery-validate This seems to ignore it and does not validate it, who has an idea of how to solve this? I leave the html code of my select and the validation rules in my script.

<div class="form-group">
  <label class="form-label">Ciudad</label>
  <select class="select2" id="ciudad" name="ciudad">
    <option>Seleccione una ciudad</option>
    <?php
     foreach ($getciudad as $id => $nombre)
       echo '<option  value="',$id,'">'.$nombre.'</option>';
    ?> 
  </select>
</div>

$('document').ready(function(){

$(".select2").select2();

$('#form').validate({
      rules: {
        ciudad:{
          required: true
        }
      },
      messages: {
        ciudad: {
          required: "Este campo es requerido."
        }
      },
      highlight: function (input) {
        $(input).parents('.form-group').addClass('has-danger');
      },
      unhighlight: function (input) {
        $(input).parents('.form-group').removeClass('has-danger');
      },
      errorPlacement: function (error, element) {
        $(element).parents('.form-group').append(error);
      },
      submitHandler : function(_form){
        var form = $(_form);
        $.ajax({
          url: form.attr('action'),
          type: form.attr('method'),
          data: form.serialize(),
          dataType: 'json',
          success:function(response){
          ...
          }
        })
      }
    }); 
});

javascript jquery jquery-validate

asked by FeRcHo 31.07.2017 в 21:14

source

3 answers

Is it correct to use the same id and name in the input of an html form? session_start (): Can not start session when headers already sent

score 7 · Answer 1

Because the validation of the form does not validate hidden elements, you have to indicate that you have to validate those hidden elements with the ignore:[] property.

Later this would validate the select but every time it changes it would not validate again and that is a problem for that you have to apply the validation every time a change is made in select .

$select.on('change', function() {
  $(this).trigger('blur');
});

Once we have these changes, we add a rule to the plugin so that it validates the select2 since it does not have the attribute name .

$select.rules('add', {
  required: true,
  messages: {
    required: "Seleccione una Opcion"
  }
});

Note: This can have problems when using Ajax in the select2.

I leave you an example working

(function() {
  var $select = $('select').select2({
    placeholder: 'Choose',
    allowClear: true
  });

  /*
   * Aplicando la validacion del select cada vez que cambie
   */
  $select.on('change', function() {
    $(this).trigger('blur');
  });

  /*
   * Permitiendo la validacion de campos ocultos
   */
  $('#myForm').validate({
    ignore: '.select2-input, .select2-focusser',
    submitHandler: function(form) {
      alert("enviado")
    },
    errorPlacement: function(error, element) {
      $(element).next().append(error);
    }
  });

  /*
   * agregando la validacion del select 
   * ya que no tiene un atributo name el plugin
   */
  $select.rules('add', {
    required: true,
    messages: {
      required: "Seleccione una Opcion"
    }
  });

}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<form id="myForm">
  <select name="country" id="country" style="width:200px">
    <option></option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
  </select>
  <br/>
  <button type="submit">Go</button>
</form>

This is an example with ajax taking as an example the one from the Select2 page

function formatRepo(repo) {
  if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
    "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
    "</div>" +
    "</div></div>";

  return markup;
}

function formatRepoSelection(repo) {
  return repo.full_name || repo.text;
}

(function() {
  var $select = $('select').select2({
    placeholder: 'Choose',
    allowClear: true,
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function(params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function(data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function(markup) {
      return markup;
    },
    minimumInputLength: 1,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });

  /*
   * Aplicando la validacion del select cada vez que cambie
   */
  $select.on('change', function() {
    $(this).trigger('blur');
  });

  /*
   * Permitiendo la validacion de campos ocultos
   */
  $('#myForm').validate({
    ignore: '.select2-input, .select2-focusser',
    submitHandler: function(form) {
      alert("enviado")
    },
    errorPlacement: function(error, element) {
      $(element).next().append(error);
    }
  });

  /*
   * agregando la validacion del select 
   * ya que no tiene un atributo name el plugin
   */
  $select.rules('add', {
    required: true,
    messages: {
      required: "Seleccione una Opcion"
    }
  });

}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<form id="myForm">
  <select name="country" id="country" style="width:200px">
    <option></option>
    <option value="US">United States</option>
    <option value="CA">Canada</option>
  </select>
  <br/>
  <button type="submit">Go</button>
</form>

score 4 · Answer 2

The only error that your code has, is that the <option>Seleccione una ciudad</option> , it lacks the attribute value=""

Example:

$('document').ready(function() {

  $(".select2").select2();

  $('#form').validate({
    rules: {
      ciudad: {
        required: true
      }
    },
    messages: {
      ciudad: {
        required: "Este campo es requerido."
      }
    },
    highlight: function(input) {
      $(input).parents('.form-group').addClass('has-danger');
    },
    unhighlight: function(input) {
      $(input).parents('.form-group').removeClass('has-danger');
    },
    errorPlacement: function(error, element) {
      $(element).parents('.form-group').append(error);
    },
    submitHandler: function(_form) {
      console.log('Vale!');
    }
  });
});

.select2 {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<form id="form">
  <div class="form-group">
    <label class="form-label">Ciudad</label>
    <select class="select2" name="ciudad">
      <option value="">Seleccione una ciudad</option>
      <option value="id">Ciudad</option>
    </select><br/>
    <button>Validar</button>
  </div>
</form>

-

Additionally, if you want to self-validate after selecting an option, you can do the following:

By instantiating the select2 , you can subscribe to the event select2:select , which triggers when the value of select has been modified by select2 .
Then to notify the validate you can trigger a blur event on the select element.

Example:

$('document').ready(function() {

  $(".select2")
    .select2()
    .on('select2:select', function() {
      $(this).trigger('blur');
    });

  $('#form').validate({
    rules: {
      ciudad: {
        required: true
      }
    },
    messages: {
      ciudad: {
        required: "Este campo es requerido."
      }
    },
    highlight: function(input) {
      $(input).parents('.form-group').addClass('has-danger');
    },
    unhighlight: function(input) {
      $(input).parents('.form-group').removeClass('has-danger');
    },
    errorPlacement: function(error, element) {
      $(element).parents('.form-group').append(error);
    },
    submitHandler: function(_form) {
      console.log('Vale!');
    }
  });
});

.select2 {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

<form id="form">
  <div class="form-group">
    <label class="form-label">Ciudad</label>
    <select class="select2" name="ciudad">
      <option value="">Seleccione una ciudad</option>
      <option value="id">Ciudad</option>
    </select><br/>
    <button>Validar</button>
  </div>
</form>

score 2 · Answer 3

This is the way that I used a selector per client:

Html file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

File js:

$.validator.addMethod("validaSelect", function(value, element, arg){
  return arg != value;
 }, "Seleccione una opción");

$('#form').validate({
      rules:{
        ciudad:{
            validaSelect: "SELECCIONE UNA OPCIÓN"
        }
    },
messages:{
        pais:"Introduzca una ciudad válida"
    }
});