I am trying to create a JavaScript code that validates user input based on certain rules. If the input does not meet the criteria, I want an error message to appear next to the text field. For instance, if the rule is that the first character must be a capital letter followed by a number and no special characters are allowed.
For example, if a user enters "13da2343*", they should see a message saying "Invalid entry, first character should be a Capital letter and Special characters are invalid." displayed next to the text field.
As a beginner in JavaScript, I have no idea where to start. Any help would be appreciated.
EDIT
This is my current website code, but I am struggling to display the specific reason why an entered character is invalid next to the text field.
<!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>
EDIT 2
I have updated the script to only accept CAPITAL letters but still struggling to restrict it to just the first character being uppercase.
<!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>