-2

我不太了解 Javascript,我尝试了所有方法,但找不到解决问题的方法。

我正在使用这个插件进行验证,它运行良好,但只有一个小问题是它写入的错误文本一直显示在输入字段旁边,我希望它显示在输入字段下方。任何人都可以为此修改此脚本吗?非常感谢你 :)

;(function($, window, document, undefined){

    // our plugin constructor
  var SimpleValidate = function(elem, options) {
    this.elem = elem;
    this.$elem = $(elem);
    this.options = options;
    this.metadata = this.$elem.data('plugin-options');
    this.$requiredInputs = this.$elem.find(':input.required');
  };

  // the plugin prototype
  SimpleValidate.prototype = {
    defaults: {
      errorClass: 'error',
      errorText: 'Please fill out this field.',
      emailErrorText: 'Please enter a valid E-mail',
      errorElement: 'strong',
      removeLabelChar: '*',
      inputErrorClass: 'input-error',
      completeCallback: '',
      ajaxRequest: false
    },

    init: function() {
      var self = this;

      // Introduce defaults that can be extended either
      // globally or using an object literal.
      self.config = $.extend({}, self.defaults, self.options, self.metadata);

      // What type of error message is it
      self.errorMsgType = self.config.errorText.search(/{label}/);
      self.emailErrorMsgType = self.config.emailErrorText.search(/{label}/);

      self.$elem.on('submit.simpleValidate', $.proxy(self.handleSubmit, self));

      return this;
    },

    checkField: function(index) {
      var self = this;
      var $field = self.$requiredInputs.eq(index);
      var fieldValue = $.trim($field.val());
      var labelText = $field.siblings('label').text().replace(self.config.removeLabelChar, '');
      var errorMsg = '';

      //Check if it's empty or an invalid email and format the error message
      if(fieldValue === '') {
        errorMsg = self.formatErrorMsg(self.config.errorText, labelText, self.errorMsgType);
        self.hasError = true;
      } else if($field.hasClass('email')) {
        if(!(/^([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/.test(fieldValue.toLowerCase()))) {
          errorMsg = self.formatErrorMsg(self.config.emailErrorText, labelText, self.emailErrorMsgType);
          self.hasError = true;
        }
      }

      //If there is an error, display it
      if(errorMsg !== '') {
        $field.addClass(self.config.inputErrorClass).after('<' + self.config.errorElement + ' class="' + self.config.errorClass + '">' + errorMsg + '</' + self.config.errorElement + '>');
      }
    },

    formatErrorMsg: function(errorText, labelText, errorMsgType) {
      return (errorMsgType > -1 ) ? errorText.replace('{label}', labelText) : errorText;
    },

    handleSubmit: function(e) {
      var self = this;

      // We are just starting, so there are no errors yet
      this.hasError = false;

      // Reset existing displayed errors
      self.$elem.find(self.config.errorElement + '.' + self.config.errorClass).remove();
      self.$elem.find(':input.' + self.config.inputErrorClass).removeClass(self.config.inputErrorClass);

      // Check each field
      self.$requiredInputs.each($.proxy(self.checkField, self));

      // Don't submit the form if there are errors
      if(self.hasError) { 
        e.preventDefault();
      } else if(self.config.completeCallback !== '') { // If there is a callback
        self.config.completeCallback(self.$elem);

        // If AJAX request
        if(self.config.ajaxRequest) {
          e.preventDefault();
        }
      }
    }
  };

  SimpleValidate.defaults = SimpleValidate.prototype.defaults;

  $.fn.simpleValidate = function(options) {
    return this.each(function() {
      new SimpleValidate(this, options).init();
    });
  };

})( jQuery, window , document );
4

5 回答 5

0

当你调用它时,只需传入参数 : errorElement: 'p'。默认使用strong,它是一个内联元素。

于 2013-03-31T22:53:36.047 回答
0

只需更换

$field.addClass(self.config.inputErrorClass).after('<' + self.config.errorElement + ' class="' + self.config.errorClass + '">' + errorMsg + '</' + self.config.errorElement + '>')

和:

$field.addClass(self.config.inputErrorClass).after('<p><' + self.config.errorElement + ' class="' + self.config.errorClass + '">' + errorMsg + '</' + self.config.errorElement + '></p>')
于 2013-03-31T22:55:19.163 回答
0

将此添加到您的 CSS 中:

.error { display: block; }

或更改ErrorElementdiv.

  new SimpleValidate(this, {errorElement: 'div'}).init();
于 2013-03-31T22:55:29.703 回答
0

一个简单的解决方案可能是更改errorElement: 'strong'块元素,例如errorElement: 'p'. 您还需要确保使用 CSS 正确设置元素的样式

如果你想学习 JavaScript,我建议你看看Eloquent JavaScript

于 2013-03-31T22:56:53.957 回答
0

不幸的是,我无法重现您的代码,因此我很难准确地说出该怎么做。但是,在我看来,您应该解决这段代码:

$field.addClass(self.config.inputErrorClass).after('<' + self.config.errorElement + ' class="' + self.config.errorClass + '">' + errorMsg + '</' + self.config.errorElement + '>');

如果我理解正确,它会在您输入后立即添加错误消息。也许你可以使用类似的东西:

$field.addClass(self.config.inputErrorClass).after('<br>').after('<' + self.config.errorElement + ' class="' + self.config.errorClass + '">' + errorMsg + '</' + self.config.errorElement + '>');
于 2013-03-31T23:02:29.997 回答