Jump to content

Mandatory text field entries


usrmd

Recommended Posts

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 by usrmd
Link to comment
Share on other sites

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);

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.