お問い合わせフォームのバリデーションを作成したい

Question

以下jQueryで作成されたお問い合わせフォームのバリデーションのコードがありますがこちらをJavascriptにて書き換えを行いたいのですが、
一部上手くいかずに困っております。
上手くいかない箇所は、「var removeErrorMessage = function (selector) {」の箇所です。
もし、input,textareaの属性isSuccessがtrueであれば、class「errorInput」、<span class="errorMsg">を削除するというコードを
記述しているのですが、こちらが効かずに困っております。
ご教授のほどよろしくお願いいたします。

<div>
<form id="myForm" method="post">
<table>
<tr>
<th><label for="formName">名前 <span class="ind">必須</span></label></th>
<td><input type="text" name="formName" id="formName"></td>
</tr>
<tr>
<th><label for="formFurigana">ふりがな <span class="ind">必須</span></label></th>
<td><input type="text" name="formFurigana" id="formFurigana"></td>
</tr>
<tr>
<th><label for="formTell">電話番号 <span class="ind">必須</span></label></th>
<td><input type="text" name="formTell" id="formTell"></td>
</tr>
<tr>
<th><label for="formMail">メールアドレス <span class="ind">必須</span></label></th>
<td><input type="text" name="formMail" id="formMail"></td>
</tr>
<tr>
<th><label for="formInquiry">お問い合わせ内容 <span class="ind">必須</span></label></th>
<td><textarea rows="9" name="formInquiry" id="formInquiry"></textarea></td>
</tr>
</table>
<p><input type="submit" value="送信内容を確認する"></p>
</form>
</div>

html,body,div,p,table,tr,th,td,form,ul,li{
	margin: 0;
	padding: 0;
}

img{
	border: none;
}

body{
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 20px;
	margin: 24px;
}

div{
	width: 695px;
}

li{
	list-style: none;
}

form{
}

table{
	width: 100%;
	margin: 0 0 12px;
	border-collapse: collapse;
	border-spacing: 0;
}

th,
td{
	padding: 8px 12px;
	border: 1px solid #ddd;
	text-align: left;
	vertical-align: middle;
}

th{
	width: 180px;
	background: #eee;
	font-weight: normal;
}

th span{
	font-size: 12px;
}

th .ind{
	color: #f00;
	font-size: 14px;
}

td{
	background: #fff;
}

td input{
	width: 250px;
}

td textarea{
	width: 464px;
}

.errorMsg{
	display: block;
	color: #f00;
}

.errorInput{
	background: #fcf0f2;
}

$(function(){

	function setMyForm(target){

		var ERROR_MESSAGE_CLASSNAME = 'errorMsg'; //エラー時のメッセージ要素のclass名
		var ERROR_INPUT_CLASSNAME = 'errorInput'; //エラー時のinput要素のclass名

		var items = []; //チェック対象となるテキスト入力要素を格納した配列

		//項目チェックする
		var checkAll = function(){
			var errorCount = 0;
			//項目：名前のチェック
			checkEmptyText( items[0], '名前をご入力ください。' );
			//項目：ふりがなのチェック
			checkEmptyText( items[1], 'ふりがなをご入力ください。' );
			//項目：電話番号のチェック
			checkEmptyText( items[2], '電話番号をご入力ください。' );
			//項目：メールアドレスのチェック
			checkEmptyText( items[3], 'メールアドレスをご入力ください。' );
			//項目：お問い合わせ内容のチェック
			checkEmptyText( items[4], 'お問い合わせ内容をご入力ください。' );
			//input,textareaのチェック
			for( var i=0; i<items.length; i++ ){
				if( items[i].prop('isSuccess') == false ){
					errorCount++;
				};
			};
			//エラーカウントが0であれば、エラー無し
			if( errorCount == 0 ){
				alert( '送信内容にエラーはありません。' );
			};
		};

		//エラーメッセージの追加
		var addErrorMessage = function(selector, msg){
			removeErrorMessage(selector);
			selector.before('<span class="'+ERROR_MESSAGE_CLASSNAME+'">'+msg+'</span>');
			selector.addClass(ERROR_INPUT_CLASSNAME);
		};

		//エラーメッセージの削除
		var removeErrorMessage = function(selector){
			var msgSelector = selector.parent().find('.'+ERROR_MESSAGE_CLASSNAME);
			if( msgSelector.length != 0 ){
				msgSelector.remove();
				selector.removeClass(ERROR_INPUT_CLASSNAME);
			};
		};

		//input,textareaの未入力チェック
		var checkEmptyText = function(selector, msg){
			if( selector.val() == '' ){
				addErrorMessage(selector, msg);
				selector.prop('isSuccess', false);
			}else{
				removeErrorMessage(selector);
				selector.prop('isSuccess', true);
			};
		};

		//初期設定
		var init = function(){
			//submitイベントの設定
			target.on({
				'submit': function(){
					checkAll();
					return false;
				}
			});
			//input要素を配列に格納
			items = [
				target.find('input[name=formName]'),
				target.find('input[name=formFurigana]'),
				target.find('input[name=formTell]'),
				target.find('input[name=formMail]'),
				target.find('textarea[name=formInquiry]')
			];
			//input要素のプロパティを設定
			$.each(items, function(index){
				items[index].prop('isSuccess', false);
				console.log(items)
			});
			//enterキーでsubmitしてしまうのを防止する
			target.find('input[type=text]').on({
				'keypress': function(e){
					if( (e.keyCode == 13) ) return false;
				}
			});
		};

		init();

	};

	setMyForm($('#myForm'));

});

//Javascriptにて書き換えたもの

(function () {

	var ERROR_MESSAGE_CLASSNAME = 'errorMsg';
	var ERROR_INPUT_CLASSNAME = 'errorInput';

	var inputSubmit = document.querySelectorAll('input[type="submit"]');
	inputSubmit[0].addEventListener("click", function (e) {
		checkAll();
		e.preventDefault();
		//console.log("checkAll関数を実行")
	});

	items = [
		document.querySelectorAll('input[name=formName]')[0],
		document.querySelectorAll('input[name=formFurigana]')[0],
		document.querySelectorAll('input[name=formTell]')[0],
		document.querySelectorAll('input[name=formMail]')[0],
		document.querySelectorAll('textarea[name=formInquiry]')[0]
	];

	for (let i = 0; i < items.length; i++) {
		items[i].setAttribute("isSuccess", false);
	}

	var inputText = document.querySelectorAll('input[type="text"]')
	for (let i = 0; i < inputText.length; i++) {
		inputText[i].addEventListener("keypress", function (e) {
			if (e.keyCode == 13) {
				e.preventDefault();
			}
		});
	}

	function checkAll() {
		var errorCount = 0;

		checkEmptyText(items[0], '名前をご入力ください。');
		checkEmptyText(items[1], 'ふりがなをご入力ください。');
		checkEmptyText(items[2], '電話番号をご入力ください。');
		checkEmptyText(items[3], 'メールアドレスをご入力ください。');
		checkEmptyText(items[4], 'お問い合わせ内容をご入力ください。');

		for (var i = 0; i < items.length; i++) {
			if (items[i].getAttribute('isSuccess') == false) {
				errorCount++;
				//console.log(items)
			};
		};
		if (errorCount == 0) {
			alert('送信内容にエラーはありません。');
		};
	}

	var checkEmptyText = function (selector, msg) {
		if (selector.value == '') {
			addErrorMessage(selector, msg);
			selector.setAttribute("isSuccess", false);
		} else {
			removeErrorMessage(selector);
			selector.setAttribute("isSuccess", true);
		}
	};

	var addErrorMessage = function (selector, msg) {
		removeErrorMessage(selector);

		var spans = document.createElement("span");
		spans.classList.add(ERROR_MESSAGE_CLASSNAME);
		spans.textContent = msg;

		var selectorParent = selector.parentNode;
		selectorParent.appendChild(spans);
		selector.classList.add(ERROR_INPUT_CLASSNAME);
	};

	var removeErrorMessage = function (selector) {


		
		//該当箇所
		var test = selector.getAttribute("isSuccess");
		var error = document.getElementsByClassName("errorMsg");

		if(test == true) {
			selector.classList.remove(ERROR_INPUT_CLASSNAME);

			for(let i = 0; i < error.length; i++) {
				var errorParent = error[i].parentNode;
				errorParent.removeChild(error);
				console.log(errorParent)
			}
		} 


	};
})();

Comments

[yambejp]

どういうバリデーションの想定ですか？
値があるかないかだけですか？

[MTON]

ご連絡ありがとうございます。
値があるかないかだけです。
未入力チェックだけのバリデーションを作成したいです。

Answer 1

該当の箇所の前に、下記の部分ですが、

if (items[i].getAttribute('isSuccess') == false) {

getAttributeで取得したものは文字列で返ってきていると思うので、
boolean型との比較では意図していない挙動になっていませんか。

Comments

[MTON]

ご連絡ありがとうございます。
おそらくこの箇所もerrorCountが++されてないので、挙動がおかしいかと思われますが、
やり方がわかりません。