Я проверяю раскрывающийся список с помощью валидатора jquery, используя приведенный ниже код, я пытался воспроизвести то же самое, но форма исчезает после нажатия кнопки отправки, проблема, с которой я сталкиваюсь, - это правильная проверка, но добавлена метка который занимает лишние пробелы, как показано на изображении ниже с помощью стрелки, я хочу удалить эти лишние пробелы. Я выделил контур полей, если есть какая-либо ошибка.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<style type="text/css">
span.error{
outline: 1px solid red;
}
.parent-error {
outline:1px solid red;
background:red;
}
.input-validation-error {
outline: 1px solid red;
}
</style>
</head>
<body>
<form action="#" id="register-form">
<div class="form-group col-sm-6">
<label for="city">City</label>
<select name="city" id="city" class="form-control" placeholder="City">
<option value="" selected="selected">Please select</option>
<option value="Alld">Alld</option>
</select>
</div>
<input type="submit" name="register" value="Register" class="btn btn-primary" />
</form>
<script>
(function( $ ) {
'use strict';
jQuery.validator.messages.required = '';
jQuery("form#register-form").validate({
ignore:'input[type=hidden]',
rules:
{
state: { required: true },
},
errorPlacement: function (error, element) {
var elem = jQuery(element);
if (elem.hasClass("select2-hidden-accessible")) {
element = jQuery("#select2-" + elem.attr("id") + "-container").parent();
error.insertAfter(element);
}
else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
var elem = jQuery(element);
if (elem.hasClass("select2-hidden-accessible")) {
jQuery("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
}
else if(elem.is(':checkbox'))
{
elem.addClass("parent-error");
}
else {
elem.addClass('input-validation-error');
}
},
unhighlight: function (element, errorClass, validClass) {
var elem = jQuery(element);
if (elem.hasClass("select2-hidden-accessible")) {
jQuery("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
}
else if(elem.is(':checkbox'))
{
elem.removeClass("parent-error");
}
else {
elem.removeClass('input-validation-error');
}
},
success: function (label, element) {
//jQuery(element).parent().removeClass('has-error');
},
submitHandler: function(form) {
form.submit();
}
});
jQuery('select').on("change", function (e) {
jQuery(this).valid()
});
})( jQuery );
</script>
</body>
</html>
jQuery.validator.messages.required = '';
jQuery("form#register").validate({
ignore:'input[type=hidden]',
rules:
{
.....
},messages:{
.....
},
errorPlacement: function (error, element) {
var elem = jQuery(element);
if (elem.hasClass("select2-hidden-accessible")) {
element = jQuery("#select2-" + elem.attr("id") + "-container").parent();
error.insertAfter(element);
}
else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
var elem = jQuery(element);
if (elem.hasClass("select2-hidden-accessible")) {
jQuery("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
}
else if(elem.is(':checkbox'))
{
elem.addClass("parent-error");
}
else {
elem.addClass('input-validation-error');
}
},
unhighlight: function (element, errorClass, validClass) {
var elem = jQuery(element);
if (elem.hasClass("select2-hidden-accessible")) {
jQuery("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
}
else if(elem.is(':checkbox'))
{
elem.removeClass("parent-error");
}
else {
elem.removeClass('input-validation-error');
}
},
success: function (label, element) {
},
submitHandler: function(form) {
form.submit();
}
});
jQuery('select').on("change", function (e) {
jQuery(this).valid()
});
Когда есть какая-либо ошибка, тогда между раскрывающимся и раскрывающимся списком отображается пробел, как на изображении:
Это мой источник представления дизайна, который отображается 