0
我對js中的驗證表單有疑問，能否幫助我，因爲我卡住了。我想單獨點擊問題輸入和標籤輸入。但是現在，如果我點擊標籤輸入顯示來自問題輸入的信息（紅色背景上的信息）。我想我的js代碼有問題。javascript中的驗證表單，單獨的點擊輸入
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
var d = document.getElementById("de_scri_tit_11")
d.classList.add("w_te_88")
$(document).ready(function() {
$("#de_scri_tit_11").css('display', 'block')
});
}
} else {
var regError = new RegExp('(\\s|^)' + options.classError + '(\\s|$)');
input.parentNode.className = input.parentNode.className.replace(regError, '');
var d = document.getElementById("de_scri_tit_11")
d.classList.remove("w_te_88")
$(document).ready(function() {
$("#de_scri_tit_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('as_tags_in_l67');
[].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
})
});#de_scri_tit_11 {
height: 50px;
font-size: 14px;
width: 240px;
position: absolute;
left: 350px;
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: 'title should have min 15 characters'
}
#de_scri_tag_11 {
height: 50px;
font-size: 14px;
width: 240px;
position: absolute;
left: 860px;
top: 233px;
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: 'Tytuł musi mieć minium 15 znaków i maksimum 100 znaków'
}
.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;
}
#til_bo_x43 {
width: 370px;
height: 40px;
padding-top: 5px;
position: absolute;
top: 20px;
left: 10px;
}
label.til_l67 {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
input[type=text].til_l67_text {
margin-left: 19px;
width: 203px;
font-size: 16px;
font-family: Arial;
height: 30px;
border: 1px solid #33b2ff;
padding-left: 5px;
}
input[type=text].til_l67_text:focus {
outline-style: none;
}
.as_tags_cho99 {
width: 325px;
height: 40px;
padding-top: 5px;
position: relative;
top: 70px;
left: 75px;
}
label.as_tags_lab_l67 {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}
input[type=text].as_tags_in_l67 {
margin-left: 19px;
width: 193px;
font-size: 16px;
font-family: Arial;
height: 30px;
border: 1px solid #33b2ff;
padding-left: 5px;
}
input[type=text].as_tags_in_l67:focus {
outline-style: none;
}
.post_ans_976 {
position: relative;
left: 170px;
top: 100px;
height: 32px;
width: 150px;
font-size: 17px;
background-color: #ff9c33;
color: #fff;
font-family: Arial;
border: none;
border-radius: 7px;
margin-bottom: 200px;
}
.post_ans_976:focus {
background-color: #ff9c33;
}
.post_ans_976:active {
background-color: #ff4c00;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form">
<div class="ask_con_area67">
<div id="til_bo_x43">
<label class="til_l67">Tytuł pytania</label>
<input class="til_l67_text" type="text" placeholder="Question title" autocomplete="off" required />
<div id="de_scri_tit_11"></div>
</div>
<div class="as_tags_cho99">
<label class="as_tags_lab_l67">Tagi</label>
<input class="as_tags_in_l67" type="text" placeholder="Question tags" required />
<div id="de_scri_tag_11"></div>
</div>
<button class="post_ans_976">Add question</button>
</div>
</form>
感謝，但看當點擊問題輸入添加.w_te_88類內容的CSS樣式，我想這樣做點擊標籤輸入時也是如此，但不能處理區分點擊問題輸入和標籤輸入點擊 –
@VR更新了此代碼。 – Deep
很多，對我來說這是一個很大的進步，但爲什麼無效輸入是當我注重輸入，沒有當我模糊？ –