/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Javascript Check/Verify Form Min Length Character Entered for Zip Code?

Copy linkTweet thisAlerts:
Nov 15.2011

The following Javascript will return an error message if the user did not enter any value into the zip code field. The form will submit even if user entered only 1 character. Does anyone know how to change this to at least minimum 5 characters must be entered into the field? Thank you.

…}
var fname = “CustomFields_17_2”;
var fld = document.getElementById(fname);
if (fld.value == “”) {
alert(“Please enter a value for field Postal Zipcode”);
fld.focus();
return false;
}…

<form method=”post” action=”form.php” id=”frmSS2″ name=”frmSS2″ onsubmit=”return CheckForm2(this);”>
<input type=”text” name=”CustomFields[17]” id=”CustomFields_17_2″ value=”” size=’10’ maxlength=’10’>
<input type=”submit” value=”Subscribe” class=”button” />
</form>

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@JunkMaleNov 15.2011 — RegExp and some expression to validate postal codes.

You have to remember that world-wide, countries around the world all have different rules for validation of a postal code or Zip code or Zone or District...

My take on validation of forms should be that you do not force the user to give information that they may not have or do not want to give. A postal Code is not important if its wrong, what is important is the address and if people can not get the address right then why are they bothering buying from your site?

ALSO... I hate contact forms with companies that insist on you parting with a phone number when all you want is information by email.
Copy linkTweet thisAlerts:
@JunkMaleNov 15.2011 — You would be best testing the field content with a RegExp to test for whitespace characters that would be missed by the ="" test.

A very simple test is...

[CODE]String.prototype.isEmpty = function(){
return !(this.length>0);
}[/CODE]

so something like

[CODE]if ( fld.value.isEmpty() ) {
alert("Please enter a value for field Postal Zipcode");[/CODE]

when augmented with a RegExp test would cover all bases.
Copy linkTweet thisAlerts:
@will_chenauthorNov 15.2011 — Sorry. This form is for US users only. So they must enter at least 5 digits. Client insists on it.
Copy linkTweet thisAlerts:
@JunkMaleNov 15.2011 — Then in my very simple prototype function the >0 would be >4 to make minimum of 5 digits.
Copy linkTweet thisAlerts:
@JunkMaleNov 15.2011 — You could even make a routine that pops up a window if the user does not enter a minimum to enforce the requirement. eg...
[CODE]if( fld.value.isEmpty() ){
do{
fld.value=prompt("Please enter a value for field Postal Zipcode",fld.value);
}while( fld.value.isEmpty() )
[/CODE]
Copy linkTweet thisAlerts:
@will_chenauthorNov 15.2011 — Thanks for your answers. Sorry can you be more clear. I am a JS beginner.

So the final code will look like this?

...}

var fname = "CustomFields_17_2";

var fld = document.getElementById(fname);

if ( fld.value.isEmpty() ) {

alert("Please enter a value for field Postal Zipcode");

String.prototype.isEmpty = function(){

return !(this.length>0);

}

}...
Copy linkTweet thisAlerts:
@JunkMaleNov 15.2011 — I just tried this out, may help you.

You have to enter 5 digits, less than that and your put in to a loop to input the right length of digits / characters. Then you can submit the form.
[CODE]String.prototype.isEmpty = function(){
return !(this.length>4);
}

function checkIt(o){
fld = o.testfld;
if( fld.value.isEmpty() ){
do{
fld.value=prompt("Please enter a value for field Postal Zipcode",fld.value);
}while( fld.value.isEmpty() )
return fld.value.isEmpty();
}else{

return true;

}

}

</script>
</head>

<body>
<form id="form1" name="form1" method="POST" action="#" onsubmit="return checkIt(this);" >
<input type="text" id="testfld" name="testfld" value=""/>
<input type="submit" name="Submit" value="Submit" />
</form>[/CODE]
Copy linkTweet thisAlerts:
@will_chenauthorNov 15.2011 — sorry when i paste the js code on top of the existing javascript, it didnt work. I only showed you the zip code in my original post but the full form is actually more than that. There are other inputs but i just need to fix the zipcode. Below is the full html.

<script type="text/javascript">

String.prototype.isEmpty = function(){

return !(this.length>4);

}

function CheckForm2(o){

fld = o.CustomFields_17_2;

if ( fld.value.isEmpty() ) {

alert("Please enter minimum of 5 digits for field Postal Zipcode");

}

}

</script>


<script type="text/javascript">

// <![CDATA[



function CheckMultiple2(frm, name) {

for (var i=0; i < frm.length; i++)

{

fldObj = frm.elements[i];

fldId = fldObj.id;

if (fldId) {

var fieldnamecheck=fldObj.id.indexOf(name);

if (fieldnamecheck != -1) {

if (fldObj.checked) {

return true;

}

}

}

}

return false;

}

function CheckForm2(f) {

var email_re = /[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:.[a-z0-9!#$%&amp;'*+/=?^_{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;

if (!email_re.test(f.email.value)) {

alert("Please enter your email address.");

f.email.focus();

return false;

}



var fname = "CustomFields_2_2";

var fld = document.getElementById(fname);

if (fld.value == "") {

alert("Please enter a value for field First Name");

fld.focus();

return false;

}



var fname = "CustomFields_3_2";

var fld = document.getElementById(fname);

if (fld.value == "") {

alert("Please enter a value for field Last Name");

fld.focus();

return false;

}



var fldcheck = CheckMultiple2(f, "CustomFields[13_2]");

if (!fldcheck) {

alert("Please choose an option for field Gender");

return false;

}



var fldcheck = CheckMultiple2(f, "CustomFields[14_2]");

if (!fldcheck) {

alert("Please choose an option for field Age");

return false;

}



var fname = "CustomFields_18_2";

var fld = document.getElementById(fname);

if (fld.selectedIndex == -1 || fld.selectedIndex == 0) {

alert("Please choose an option for field State");

fld.focus();

return false;

}



var fname = "CustomFields_17_2";

var fld = document.getElementById(fname);



if (fld.value == "") {

alert("Please enter a value for field Postal Zipcode");

fld.focus();

return false;

}



CheckNum = parseInt(fld.value);

if(fld.value != "" && isNaN(CheckNum)) {

alert("Please enter a numeric value for field Postal Zipcode");

fld.select();

fld.focus();

return false;

}



var fldcheck = CheckMultiple2(f, "CustomFields[19_2]");

if (!fldcheck) {

alert("Please choose an option for field Language Preference");

return false;

}



var fldcheck = CheckMultiple2(f, "CustomFields[20_2]");

if (!fldcheck) {

alert("Please agree to the terms and conditions");

return false;

}

if (f.captcha.value == "") {

alert("Please enter the security code shown");

f.captcha.focus();

return false;

}


return true;

}



// ]]>

</script>

<form method="post" action="http://newsletters.vertextelecom.com/form.php?form=2" id="frmSS2" name="frmSS2" onsubmit="return CheckForm2(this);">

<input type="text" name="CustomFields[17]" id="CustomFields_17_2" value="" size='10' maxlength='10'>

....there are other inputs but i just need to fix the zipcode
Copy linkTweet thisAlerts:
@will_chenauthorNov 15.2011 — Fixed! A easy fix.

it turned out i only need to

replace if (fld.value == "") {

with if (fld.value.length < 5) {
Copy linkTweet thisAlerts:
@JunkMaleNov 16.2011 — Well no, the code wouldn't work WITH your site, it is a demonstration FOR YOU to modify for YOUR NEEDS...!

It however does not get around the fact that any 5 characters will do, putting the validation in to its own function and adding a RexExp test to that on top of the required 5 characters would make sure that what is passed is the required Type of return and not juts any old 5 characters.
×

Success!

Help @will_chen spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...