【JS】フォームバリデーション

by tea4two

HTML

<h1>HTML5 placeholder and pattern version</h1>
<form action="" method="post" name="theForm">
    
    <p id="error"></p>
    <br>TEL(placeholder)
    <br>
    <input type="text" id="tel3" name="tel3" pattern="\d{3}\-\d{3}\-\d{4}" placeholder="123-456-7890">
    <br>
    <br>
</form>

CSS

#error {
    color: red;
}

JavaScript

var error = document.getElementById('error');

//input用配列作成
var inputFields = document.getElementsByTagName('input');

//ループ
for (key in inputFields) {
    
    var myField = inputFields[key];
    
    myField.onchange = function () {
        var pat = this.pattern,
            val = this.value,
            plsh = this.placeholder,
            matchPat = val.match(pat);
        console.log(matchPat);
        if (!matchPat) {
            //not valid
            error.innerHTML = '形式がちがうよ ' + plsh + ' の形式でね。';
        } else {
            //valid
            error.innerHTML = '';
        }
    }
}