Mandatory text field entries

[usrmd]

I've been working on a project here oplinfo.hj.cx/insert_test.php

 

When a user is adding a game and it's compatibly information to the database, I'm able to make check boxes and radio button selections mandatory, as well as specify the min/max characters for a text field.

 

<script Language="Javascript">
<!--
function CheckGameCode()
{
// Check the length of the value of the element named text_name
// from the form named form_name if it's < 10 and > 10 characters
// display a message asking for different input
if ((form1.gamecode.value.length < 10) || (form1.gamecode.value.length > 10))
{
// Build alert box message showing how many characters entered
mesg = "You have entered " + form1.gamecode.value.length + " character(s) for Game Code\n"
mesg = mesg + "Valid Game Code entries are 10 characters.\n"
mesg = mesg + "Please verify your input and submit again.\n"
mesg = mesg + "Example: SLUS-12345"
alert(mesg);
// Place the cursor on the field for revision
form1.gamecode.focus();
// return false to stop further processing
return (false);
}
// If text_name is not null continue processing
return (true);
}
-->
</script>

<script language="Javascript">
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("gamename", "gamecode", "region", "comp", "vmc");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Game Name", "Game Code", "Region", "Result", "VMC Support");
// dialog message
var alertMsg = "Complete the following fields:\n";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}

if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
</script>

 

and the form

<table width="830" border="0" bgcolor="#003131" align="center"><form action="insert_action.php" method="post" name="form1" id="form1" onsubmit="return !!(CheckGameCode() & formCheck(this));">
<tr>
<td width="174" height="38" bgcolor="#003a39"><strong>  Game Name / Game Code</strong></td>
<td width="438" bgcolor="#003a39">  <input name="gamename" type="text" id="" size="40" maxlength="35" />
<input name="gamecode" type="text" id="gamecode" size="10" maxlength="10" /></td>
<td width="204" bgcolor="#003a39"> For gamecode: <a href="http://www.sonyindex.com/index.htm">Sony Index</a><br />
 Enter using 10 chars: ABCD-12345</td>
</tr>

 

Now what I'd like to do is make the "gamecode" text field require a certain character such as "-", rather then only requiring 10 characters.. more specifically, I'd like the first 4 characters required to be a letter (A-Z), the 5th character to be a "-" and the last 5 to be integers.. else the form does not submit.

I'd like to eventually use these gamecodes to guarantee no duplicate entries into the database, and also proper format (example: ABCD-12345) if I ever decide to loop and display the row on the web page. The required format would be help against people just typing 10 random characters or using different gamecode format (ABCD_123.45), since duplicate entry validation will depend on the accuracy of these gamecodes.

 

Is this possible with Javascript? If yes, how might I go about implementing these requirements.

Edited February 18, 2013 by usrmd

[codefossa]

Here's a quickly thrown together way of doing it. You can modify it to work with the for submission instead of a button click, but it's just for an example.

 

Demo: http://lightron.no-ip.org/tmp/44/

 

HTML

<input type="text" id="key" maxlength="10" />
<div id="status" style="width: 16px; height: 16px; float: left; background-image: url(warning.png); margin-top: 7px; margin-right: 4px;"></div>
<input type="button" value="Add Key" id="submit" />

 

Javascript

// Allow page to load before executing.
window.addEventListener("load", function()
{
   // Keep track of whether key is valid or not.
   var keyValid = false;
   var keyInput = window.document.querySelector("#key");

   // Default field to blank.
   keyInput.value = "";

   // Watch user input.
   keyInput.addEventListener("keyup", function(e)
   {
       // Help the user format they key.
       keyInput.value = keyInput.value.replace(/-/, '').substr(0, 4).toUpperCase().replace(/[^A-Z]/i, '') + (keyInput.value.length > 3 ? '-' : '') + keyInput.value.substr(5, 9).replace(/[^0-9]/, '');

       // Check key validity and show icon.
       keyValid = keyInput.value.match(/^[A-Z]{4}\-[0-9]{5}/) ? true : false;
       window.document.querySelector("#status").style.backgroundImage = keyValid ? 'url(tick.png)' : 'url(invalid.png)';
   }, false);

   // Verify Submission
   window.document.querySelector("#submit").addEventListener("click", function()
   {
       // Is the key valid when pressing submit?
       if (keyValid)
       {
           alert("Key is Valid");
       }
       else
       {
           alert("Key is Invalid");
       }
   }, false);
}, false);