javascript - 相同的代码不一样

Question

$('#as_tags_in_l67').tagging({});    
$('.type-zone').attr({contenteditable: true,class:"type-zone",placeholder:"tags",required:'',type:"text",});
      
//validation form    
var validateForm = (function() {
  var options = {};
  var classError = 'error';
    var showFieldValidation = function(input, inputIsValid) {
        if (!inputIsValid) {
            if (!input.parentNode.className || input.parentNode.className.indexOf(options.classError)==-1) {
            input.parentNode.className += ' ' + options.classError
	            if(input.classList.contains("til_l67_text"))
            {
               var d = document.getElementById("de_scri_tit_11");
			   d.classList.add("w_te_88")
               $("#de_scri_tit_11").css('display','block')
            }
            else{
            var d = document.getElementById("de_scri_tag_11");
            d.classList.add("w_tg_11");
            $("#de_scri_tag_11").css('display','block')
            }}
        } else {
            var regError = new RegExp('(\\s|^)'+options.classError+'(\\s|$)');
            input.parentNode.className =              input.parentNode.className.replace(regError, '');
          
            if(input.classList.contains("til_l67_text"))
            {
			    var d = document.getElementById("de_scri_tit_11");
                d.classList.remove("w_te_88");
                $("#de_scri_tit_11").css('display','none');
            }
            else{
                var d = document.getElementById("de_scri_tag_11");
                d.classList.remove("w_tg_11");
                $("#de_scri_tag_11").css('display','none');
            }}};
     var testInputText = function(input) {
        var fieldHasError = false;
        var mailReg = new RegExp('^[0-9a-zA-Z_.-]', 'gi');      
        if (!mailReg.test(input.value)) {
            showFieldValidation(input, false);
            return false;
        } else {
            showFieldValidation(input, true);
            return true;
        }};	
    var prepareElements = function() {
        var elements = options.form.getElementsByClassName('til_l67_text');
        [].forEach.call(elements, function(element) {
            element.removeAttribute('required');
            element.className += ' required';
            if (element.nodeName.toUpperCase() == 'INPUT') {
                var type = element.type.toUpperCase();

                if (type == 'TEXT') {
                    element.addEventListener('keyup', function() {testInputText(element)});
                    element.addEventListener('blur', function() {testInputText(element)});
                }}});   
    };
	
	 var prepareElementsTag = function() {
        var elements = options.form.getElementsByClassName('type-zone');
        [].forEach.call(elements, function(element) {
            element.removeAttribute('required');
            element.className += ' required';
            if (element.nodeName.toUpperCase() == 'INPUT') {
                var type = element.type.toUpperCase();
                if (type == 'TEXT') {
                    element.addEventListener('keyup', function() {testInputText(element)});
                    element.addEventListener('blur', function() {testInputText(element)});
                }}});        
     };	
var formSubmit = function() {
    options.form.addEventListener('submit', function(e) {
        e.preventDefault();
        var validated = true;
        var elements = options.form.querySelectorAll('.required');
        [].forEach.call(elements, function(element) {
            if (element.nodeName.toUpperCase() == 'INPUT') {
                var type = element.type.toUpperCase();                            
                if (type == 'TEXT') {
                    if (!testInputText(element)) validated = false;
                }}});                 
        if (validated) {
            this.submit();
        } else {
            return false;
        }});    
};   	
    var init = function(_options) {
        options = {
            form : _options.form || null,
            classError : _options.classError || 'error'		
        }
        if (options.form == null || options.form == undefined || options.form.length==0) {
            console.warn('validateForm: Źle przekazany formularz');
            return false;
        }
        prepareElements();
		prepareElementsTag()
		formSubmit();
	};
    return {
        init : init
    }
})();
document.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector('.form');
    validateForm.init({form : form})
});

.tagging {
    padding: 0 0 0 5px;
	margin-left:55px;
	width:190px;
	font-size:14px;
	font-family:Arial;
	min-height:28px;
	border:1px solid #33b2ff;
	position:absolute;
	top:55px;
    left:5px;
}
.til_l67
{
    position:absolute;
    top:15px;
  }
.as_tags_lab_l67
{
    position:absolute;
    top:55px;
  }
.post_ans_976
{
    position:absolute;
    top:105px;
  }
.til_l67_text
{
	border: 0 none;
	height: 25px;
	width: auto;
	min-width: 180px;
	display: inline-block;
	position:absolute;
	top:10px;
    left:60px;
	font-size:16px;
	font-family:Arial;
  	border:1px solid #33b2ff;
  }
.tagging.editable {
	cursor: text;
}
.tag {
	background: no-repeat scroll 2px 7px rgba(190,253,190,1);
	background-image: url(tag_left.png);
	border-radius:11px 0 0 11px;
	border:1px solid rgba(150,213,150,1);
	color:rgba(12,18,151,1);
	cursor: default;
	display: inline-block;
	position: relative;
	white-space: nowrap;
	padding: 5px 27px 8px 21px;
	margin: 3px 5px 0 0;
	height:13px
}
.tag .tag-i {
	color: #999;
	cursor: pointer;
	font-size: 20px;
	height: 15px;
	line-height: 15px;
	position: absolute;
	top:7px;
	right: 5px;
	text-align: center;
	width: 15px;
}
.tag .tag-i:hover {
	color: #333;
	border:1px solid #666;
	border-radius:50%;
	top:6px;
	right:4px;
	background-color:rgba(235,235,235,1);
}
.type-zone {
	border: 0 none;
	height: 15px;
	width: 160px;
	display: inline-block;
	position:absolute;
	bottom:4px;
	font-size:16px;
	font-family:Arial;
}
.type-zone:focus {
	outline: none;
}
#de_scri_tit_11
{
	height: 30px;
	font-size:14px;
	width:240px;
	position:absolute;
	left:300px;
	top:3px;
	color:#fff;
	font-family:Arial;
	display:none;
	background-color:#DB083E;
	border-radius:8px;
	padding:5px;
	border:3px solid #666;
	font-weight:bold;
}
.w_te_88:before
{
	content:'Tiltle must have min 150 char.'
}
#de_scri_tag_11
{
	height: 30px;
	font-size:14px;
	width:240px;
	position:absolute;
	left:300px;
	top:65px;
	color:#fff;
	font-family:Arial;
	display:none;
	background-color:#DB083E;
	border-radius:8px;
	padding:5px;
	border:3px solid #666;
	font-weight:bold;
}
.w_tg_11:before
{
	content:'Max 4 tags'
}
.form .error input[type=text]{
    color: #DB083E;
    border-color: #DB083E;
    background: #FFEDED url(img/error.png) right center no-repeat;
    background-position: calc(100% - 10px) center;
	box-shadow: 0 0 2px 2px red;	

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/sniperwolf/taggingJS/master/tagging.min.js"></script>
<form class="form">
	<div class="ask_con_area67">
		
		<div id="til_bo_x43">
			<label class="til_l67">Title</label>
			<input class="til_l67_text" type="text" placeholder="title" autocomplete="off" required />
			<div id="de_scri_tit_11"></div>
		</div>				
		<div id="con_ask_ex87">
		</div>		
		<div class="as_tags_cho99">
			<label class="as_tags_lab_l67">Tags</label>
			<div data-tags-input-name="tag" id="as_tags_in_l67"></div>			
			<div id="de_scri_tag_11"></div>
		</div>
	<button class="post_ans_976">Submit</button>	
	</div>	
	</form>

您好，我有一个问题，因为我是初学者，这种情况对我来说很奇怪。你能解释一下为什么 Stack 片段上的代码工作正常，但在 jsfiddle 上 https://jsfiddle.net/0h2q6zby/2/不工作。问题出在验证表单中，正确的表单是当输入为空并且您模糊显示红色边框时(如下面的代码片段)

Answer 1

您需要选择no wrap - in <body> .下面是对可用于包装代码的功能的解释

加载时

包装代码，使其在 onLoad 窗口事件中运行

onDomReady

包装代码，使其在 onDomReady 窗口事件中运行

不换行

不要包装 JavaScript 代码，将其放在部分

不换行

不要包装 JavaScript 代码，将其放在部分

您的代码在 jsfiddle 中运行良好。检查这个JSFIDDLE