将验证错误文本放在输入字段下方

问题描述：

我不是很懂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);

_ NOP ......告诉我们，到目前为止，它为什么没有工作，你已经尝试过的东西，并附加一个活例如，如果可能的话，你可能会得到一些帮助。 – elclanrs

答

添加到您的CSS：

.error { display: block; }

或更改ErrorElement到div。

new SimpleValidate(this, {errorElement: 'div'}).init();

试过这个，就像一个魅力。非常感谢你 – FallenRider

答

当你调用这个，只是通过在参数：errorElement: 'p'。缺省值是使用strong，这是一个内联元素。

答

只需更换

$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>')

应该选择正确的errorElement，或者设置正确的css风格。不改变插件的核心功能。 – Robert

试过这个和罗伯特建议的css事情，两个工作:)非常感谢，你救了我：p – FallenRider

你是对的罗伯特。 –

答

一个简单的解决办法可能是改变errorElement: 'strong'到block element，像errorElement: 'p'。你也要确保你style the elements properly with CSS。

如果您想学习JavaScript，我建议考虑看看Eloquent JavaScript。

答

不幸的是，我不能重现你的代码，因此它是我很难说该怎么做。然而，在我看来，你应该解决这一段代码：

$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 + '>');

将验证错误文本放在输入字段下方

相关推荐