使用jQuery Validator验证下拉框时的布局空白问题

问题1：提交后表单“消失” #

你碰到的表单消失其实是因为表单提交触发了默认页面刷新（你的表单action="#"），刷新后页面回到初始状态，视觉上就像表单“消失”了。如果只是做前端验证不需要实际跳转提交，或者想用AJAX处理提交，可以修改submitHandler逻辑：

submitHandler: function(form) {
  // 阻止默认表单提交，避免页面刷新
  event.preventDefault();
  // 这里可以添加你的AJAX提交逻辑，或者其他业务处理
  console.log("表单验证通过，执行自定义提交逻辑");
}

问题2：错误标签导致的下拉框空白 #

空的<span class="error"></span>标签（因为你设置了jQuery.validator.messages.required = '';）会占据额外的垂直空间，再加上你给它加的outline样式，进一步放大了下拉框和下拉项之间的空隙。你可以通过两种方式解决：

方案一：CSS隐藏空错误标签

给span.error添加样式，当标签内容为空时直接隐藏：

span.error{ outline: 1px solid red; }
span.error:empty { display: none; } /* 新增：隐藏空的错误标签 */
.parent-error { outline:1px solid red; background:red; }
.input-validation-error { outline: 1px solid red; }

这样空的错误标签就不会占据任何空间，只有当有实际错误消息时才会显示。

方案二：修改Validator配置，不生成空错误标签

在errorPlacement方法里判断错误消息是否为空，如果为空就不插入错误元素：

errorPlacement: function (error, element) {
  // 若错误消息为空，直接返回不插入标签
  if (error.text().trim() === '') {
    return;
  }
  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);
  }
}

另外注意：你的验证规则里写的是state: { required: true }，但下拉框的name是city，规则和字段不匹配会导致验证不生效，需要修正为：

rules: {
  city: {
    required: true
  },
},

完整修复后的代码示例 #

<!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; }
span.error:empty { display: none; }
.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: {
  city: {
    required: true
  },
},
errorPlacement: function (error, element) {
  if (error.text().trim() === '') {
    return;
  }
  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) {
  event.preventDefault();
  console.log("验证通过，可执行自定义提交逻辑");
}
});
jQuery('select').on("change", function (e) {
jQuery(this).valid()
});
})( jQuery );
</script>
</body>
</html>

这样修改后，空错误标签不会显示，下拉框的空白问题就能解决；同时表单提交不会触发页面刷新，也不会出现“表单消失”的情况。

内容的提问来源于stack exchange，提问作者user3653474