Question:
good I have a form in which by means of a query from php to my bd I load a select, in which I use the select2 library to be able to search in my records .. my problem is that when validating this field with jquery-validate it seems to ignore it and it does not validate it, does anyone have an idea 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){
...
}
})
}
});
});Answer:
Since the form validation does not validate hidden elements, you have to tell it to validate those hidden elements with the ignore:[] .
Later this would validate the select but each time it changes it would not validate again and that is a problem for that you have to apply the validation each time a change is made in the select .
$select.on('change', function() {
$(this).trigger('blur');
});
Once we have these changes, we add a rule to the plugin to validate the select2 since it does not have the name attribute.
$select.rules('add', {
required: true,
messages: {
required: "Seleccione una Opcion"
}
});
Note: This can have problems when using Ajax in 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" />
<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 on 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" />
<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>