Question

我想学习表单验证并尝试花费几个小时并提出以下代码...当我阅读教程时。

期望开始：如果该字段具有有效值，则该字段应突出显示，并且应具有刻度标记符号否则如果字段的值错误，则应突出显示红色的文本框/字段并抛出验证错误消息。

但是当我尝试做同样的事情时，我只能看到表单验证的错误消息。

请帮我这个代码。

文本框中的Glyphicon和突出显示没有发生。

Link to my js fiddle code snippet

下面是我从教程

获得的JS代码

谢谢：）

（文档）$。就绪（函数（）{

$('#contact-form').validate({
  rules: {
    name: {
      minlength: 2,
      required: true
    },

  },
  highlight: function(element) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
  },
  success: function(element) {
    element
    .text('OK!').addClass('valid')
    .closest('.control-group').removeClass('error').addClass('success');
  }
});

}）;

Answer 1

以下是与BootStrap 3集成的方法......

$('#contact-form').validate({
    rules: {
        name: {
            minlength: 2,
            required: true
        }
    },
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

DEMO：http://jsfiddle.net/s3jqggfn/2/

参考：Bootstrap 3 with jQuery Validation Plugin

使用jquery进行表单验证以进行引导

1 个答案: