さて、私がやりたいことは、ユーザーの入力をチェックしてルールに一致するかどうかを確認し、「xxx は有効なエントリではありません」というエラー メッセージをテキスト フィールドの横に即座に表示する JavaScript コードを作成することです。
たとえば、最初の文字が大文字で、その後に数字が続き、特殊文字を使用できないという規則がある場合。
ユーザーが「13da2343*」のように入力すると、結果は「無効なエントリです。最初の文字は大文字で、特殊文字は無効なエントリです」となるはずです。テキストフィールドのすぐ隣に表示する必要があります。
自分でこれを開始する方法についても手がかりがありません。助けてください、私はJavaScriptが初めてです
編集
これは、これまでの私の Web サイト用のコード全体です。入力された特定の文字が無効であり、それ自体がテキスト フィールドの横に表示されるようにする方法がわかりません。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> THING </title>
<meta name="Author" content="Dhruvin Desai" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
document.forms[0].addEventListener('submit', function(event) {
event.preventDefault();
var input = document.getElementsByName('a')[0];
if (~input.value.search(input.getAttribute('pattern'))) {
alert('Is valid!');
} else {
alert('It's invalid...');
}
});
}//]]>
</script>
</head>
<body>
<div id="wrapper">
<div id="response">
<form id="form" action="#" >
<fieldset>
<LEGEND><br>THING</br></LEGEND>
<!-- Input Fields -->
<label for="name"> Username </label>
<input type="text" name="a" value="" id="name" autofocus="autofocus" autocomplete="off" required="required" placeholder="Username" pattern="^[A-Z][A-Za-z]{0,11}$" onkeyup="check(this)" />
<span id="confirmMessage" class="confirmMessage"></span>
<input type="submit" value="Submit" class="submit" />
</fieldset>
</form>
</div>
</body>
編集2
機能するが大文字のみを受け入れる新しいスクリプトを追加しました。これは最初の文字にのみ必要です。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> IT 202 - Assignment 3 </title>
<meta name="Author" content="Dhruvin Desai" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="response">
<form id="form" action="insert_form.php">
<fieldset>
<LEGEND><br>Assignment 3</br></LEGEND>
<!-- Input Fields -->
<label for="name"> Username </label>
<input name="name" id="name" autofocus="autofocus" autocomplete="off" required="required" placeholder="Username" onkeyup="check(this.value)" />
<input type="submit" value="Submit" class="submit" />
</fieldset>
</form>
</div>
<script type="text/javascript">
function check(string)
{
loop: for (i = 0; i < string.length; i++)
{
var res = string.substring(i, i + 1).match(/[A-Z][A-Za-z]{0,11}/);
if (!res)
{
alert("Error on position " + (i + 1) + ":\n This character is no Letter: "+string.substring(i, i + 1));
break loop;
}
}
}
</script>
</body>