0
Идентичный код не работает один и тот же
$('#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
\t if(input.classList.contains("til_l67_text"))
{
var d = document.getElementById("de_scri_tit_11");
\t \t \t 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"))
{
\t \t \t 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;
}}; \t
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)});
}}});
};
\t
\t 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)});
}}});
}; \t
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;
}});
}; \t
var init = function(_options) {
options = {
form : _options.form || null,
classError : _options.classError || 'error' \t \t
}
if (options.form == null || options.form == undefined || options.form.length==0) {
console.warn('validateForm: Źle przekazany formularz');
return false;
}
prepareElements();
\t \t prepareElementsTag()
\t \t formSubmit();
\t };
return {
init : init
}
})();
document.addEventListener("DOMContentLoaded", function() {
var form = document.querySelector('.form');
validateForm.init({form : form})
});.tagging {
padding: 0 0 0 5px;
\t margin-left:55px;
\t width:190px;
\t font-size:14px;
\t font-family:Arial;
\t min-height:28px;
\t border:1px solid #33b2ff;
\t position:absolute;
\t 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
{
\t border: 0 none;
\t height: 25px;
\t width: auto;
\t min-width: 180px;
\t display: inline-block;
\t position:absolute;
\t top:10px;
left:60px;
\t font-size:16px;
\t font-family:Arial;
\t border:1px solid #33b2ff;
}
.tagging.editable {
\t cursor: text;
}
.tag {
\t background: no-repeat scroll 2px 7px rgba(190,253,190,1);
\t background-image: url(tag_left.png);
\t border-radius:11px 0 0 11px;
\t border:1px solid rgba(150,213,150,1);
\t color:rgba(12,18,151,1);
\t cursor: default;
\t display: inline-block;
\t position: relative;
\t white-space: nowrap;
\t padding: 5px 27px 8px 21px;
\t margin: 3px 5px 0 0;
\t height:13px
}
.tag .tag-i {
\t color: #999;
\t cursor: pointer;
\t font-size: 20px;
\t height: 15px;
\t line-height: 15px;
\t position: absolute;
\t top:7px;
\t right: 5px;
\t text-align: center;
\t width: 15px;
}
.tag .tag-i:hover {
\t color: #333;
\t border:1px solid #666;
\t border-radius:50%;
\t top:6px;
\t right:4px;
\t background-color:rgba(235,235,235,1);
}
.type-zone {
\t border: 0 none;
\t height: 15px;
\t width: 160px;
\t display: inline-block;
\t position:absolute;
\t bottom:4px;
\t font-size:16px;
\t font-family:Arial;
}
.type-zone:focus {
\t outline: none;
}
#de_scri_tit_11
{
\t height: 30px;
\t font-size:14px;
\t width:240px;
\t position:absolute;
\t left:300px;
\t top:3px;
\t color:#fff;
\t font-family:Arial;
\t display:none;
\t background-color:#DB083E;
\t border-radius:8px;
\t padding:5px;
\t border:3px solid #666;
\t font-weight:bold;
}
.w_te_88:before
{
\t content:'Tiltle must have min 150 char.'
}
#de_scri_tag_11
{
\t height: 30px;
\t font-size:14px;
\t width:240px;
\t position:absolute;
\t left:300px;
\t top:65px;
\t color:#fff;
\t font-family:Arial;
\t display:none;
\t background-color:#DB083E;
\t border-radius:8px;
\t padding:5px;
\t border:3px solid #666;
\t font-weight:bold;
}
.w_tg_11:before
{
\t 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;
\t box-shadow: 0 0 2px 2px red; \t
}<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">
\t <div class="ask_con_area67">
\t \t
\t \t <div id="til_bo_x43">
\t \t \t <label class="til_l67">Title</label>
\t \t \t <input class="til_l67_text" type="text" placeholder="title" autocomplete="off" required />
\t \t \t <div id="de_scri_tit_11"></div>
\t \t </div> \t \t \t \t
\t \t <div id="con_ask_ex87">
\t \t </div> \t \t
\t \t <div class="as_tags_cho99">
\t \t \t <label class="as_tags_lab_l67">Tags</label>
\t \t \t <div data-tags-input-name="tag" id="as_tags_in_l67"></div> \t \t \t
\t \t \t <div id="de_scri_tag_11"></div>
\t \t </div>
\t <button class="post_ans_976">Submit</button> \t
\t </div> \t
\t </form>Здравствуйте, У меня есть один вопрос, потому что я новичок, и эта ситуация странно для меня. Не могли бы вы объяснить мне, почему код в Stack snippet работает нормально, но на jsfiddle https://jsfiddle.net/0h2q6zby/2/ не работает. И проблема заключается в форме валидации, правильная форма - когда вход пуст, и вы размываете красную рамку (например, снимок ниже)
похоже, что есть некоторая проблема с 'document.addEventListener', поскольку она не выполняется на jsfiddle –