-2

私は Javascript をよく理解していません。あらゆることを試しましたが、問題の解決策が見つかりません。

私はこのプラグインを検証に使用しています。完全に機能しますが、1 つの小さな問題は、入力フィールドの横にエラー テキストが表示され続けることです。入力フィールドの下に表示する必要があります。誰でもこのスクリプトを変更できますか? どうもありがとうございました ：）

;(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

Unfortunately, I can not reproduce your code and therefore it is hard for me to say exactly what to do. However, it seems to me you should work around this piece of code:

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

If I understood right, it adds the error message right after your input. Maybe you can use something like:

$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 に答える
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; }

または に変更ErrorElementしdivます。

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