CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mat.Now
Mat.Now

Reputation: 1725

Identical code not working the same

$('#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>

Hello, I have one question, because I am beginner and this situation is weird for me. Could you explain me why the code on Stack snippet working ok, but on jsfiddle https://jsfiddle.net/0h2q6zby/2/ not working. And the problem is in validation form, correct form is when input is empty and you blur shows red border (like snippet below)

Upvotes: 0

Views: 148

Answers (1)

brk
brk

Reputation: 50291

You need to select no wrap - in <body>. Below is an explanation of the features available to wrap the code

onLoad

wrap the code so it will run in onLoad window event

onDomReady

wrap the code so it will run in onDomReady window event

no wrap - in

do not wrap the JavaScript code, place it in section

no wrap - in

do not wrap the JavaScript code, place it in section

Your code is working fine in jsfiddle. Check this JSFIDDLE

Upvotes: 2

Related Questions