Brute Force Validation

[obiwasabi]

Hi,

In the following code, how would I go about validating select menus and checkboxes. I'm aware this not a method using DOM, I'm new to JS and going old skool at the moment

//start JS
<!--
//Check for email address: look for [@] and [.]
function isEmail(elm){
	if(elm.value.indexOf("@")+"" != "-1" &&
						 elm.value.indexOf(".") + "" != "-1" &&
						 elm.value != "")
	return true;
	else return false;
}
//Check for null and for empty
function ifFilled(elm){
	if(elm.value==""||
	   elm.value == null)
	return false;
	else return true;
}
function isReady(form){
	//is address a real email address?
	if(isEmail(form.email)==false){
		alert("Please enter your email address.");
		form.email.focus();
		return false;
	}
	//is FirstName element filled?
	if(isFilled.form.firstName==false){
		alert("Please enter your First Name.");
		form.firstName.focus();
		return false;
	}
	//is LastName element filled?
	if(isFilled.form.lastName==false){
		alert("Please enter your Last Name.");
		form.lastName.focus();
		return false;
	}
	//is comments filled?
	if(isFilled.form.comments==false){
		alert("Please, speak your mind.");
		form.comments.focus();
		return false;
	}
	return true;
}
//-->

 

[cLFlaVA]

depends what you want to do...

If you want to ensure the user selects an option other than the first option in a select, here's what you'd do:

<select name="s">
  <option>Select One...</option>
  <option>One option</option>
  <option>Another option</option>
</select>

function validateSelect( s ) {
    if (s.selectedIndex == 0) {
        alert("Please select a value");
        return false;
    }
}

From your question, though, it is unclear how you'd want to call this / these functions.

What kind of validation do you want for your checkboxes?

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[cLFlaVA]

<aside>
The most common way of calling validation function(s) from your webpage is like this:

function isValid( f ) {
   if ( one field is not valid ) {
      alert('some message');
      return false;
   }

   if ( a second field is not valid ) {
      alert('some message');
      return false;
   }

   if ( a third field is not valid ) {
      alert('some message');
      return false;
   }

   return true;
}

<form name="some_form" onsubmit="return isValid(this);">
  <input type="some_type" name="some_name" ... />
</form>

</aside>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[obiwasabi]

Hi,

Thanks I intend on calling the function as follows:
<FORM NAME = "mailform" onSubmit = "return isReady(this)" ACTION = "cgi-bin/mailform.cgi">

//fields here

</form>

 

[obiwasabi]

Hi,

Here is the completed code:
external JS

<!--
//Check for email address: look for [@] and [.]
function isEmail(elm){
	if(elm.value.indexOf("@")+"" != "-1" &&
						 elm.value.indexOf(".") + "" != "-1" &&
						 elm.value != "")
	return true;
	else return false;
}
//Check for null and for empty
function ifFilled(elm){
	if(elm.value==""||
	   elm.value == null)
	return false;
	else return true;
}
function ifSelected( s ) { 
    if (s.selectedIndex == 0) { 
        return false;
		else return true;
    } 
}
function ifChecked( s ) { 
    if (s.checked == 0) { 
        return false;
		else return true;
    } 
}
function isReady(form){
	//is address a real email address?
	if(isEmail(form.email)==false){
		alert("Please enter your email address.");
		form.email.focus();
		return false;
	}
	//is FirstName element filled?
	if(isFilled.form.firstName==false){
		alert("Please enter your First Name.");
		form.firstName.focus();
		return false;
	}
	//is LastName element filled?
	if(isFilled.form.lastName==false){
		alert("Please enter your Last Name.");
		form.lastName.focus();
		return false;
	}
	//is comments filled?
	if(isFilled.form.comments==false){
		alert("Please, speak your mind.");
		form.comments.focus();
		return false;
	}
	//is project type selected?
    if (isSelected.form.projtype.selectedIndex == 0) { 
        alert("Please select a value for Project type"); 
        return false; 
    }
	//is budget range selected?
   if (isSelected.form.budgrange.selectedIndex == 0) { 
        alert("Please select a value for Budget Range"); 
        return false; 
    } 

	//is budget range selected?
   if (isSelected.form.projobj.checked == 0) { 
        alert("Please select a Project Objective"); 
        return false; 
    } 
}
	return true;
}
//-->

Form HTML

<?php include("inc/formheader.inc");?>	
<?php $thisPage="Home";?>
<body>

  
<!-- Start #container -->
<div id="container">


  <!-- Start #main --> 
  <div id="main">
  <h2 class="head">Why Ckimedia</h2>
  <h3 class="subHead">Contact</h3>
  
    
<form id="theForm" method="post" action="[URL unfurl="true"]http://ckimedia.com/cgi-bin/formmail.pl"/>[/URL]
<input type="hidden" name="recipient" value="ck@ckimedia.com" /> <input type="hidden" name="redirect" value="[URL unfurl="true"]http://ckimedia.com/thanks.php"[/URL] /> 
<p class="label">
First Name(Required) 
</p>
<input id="firstName" name="firstName" type="text" value="" size="35" />


<p class="label">Last Name(Required)</p> 
<input id="lastName" name="lastName" type="text" value="" size="35" />

<p class="label">E-Mail (Required)</p> 
<input id="email" name="email" type="text" value="" size="35" />

<p class="label">I'm listening:</p>
<textarea name="comments" id="comments" rows="12" cols="35">
</textarea>

<p class="label">
Project Type(Required) 
</p>
<select name="projtype">

  <option value="">Select type</option>

  <option value="Internet/Intranet">Internet/Intranet</option>

  <option value="Online Marketing and Promotions">Online Marketing and Promotions</option>

  <option value="Presentation Development">Presentation Development</option>

  <option value="Games &amp; Contests">Games &amp; Contests</option>

  <option value="CD-ROM">CD-ROM</option>

  <option value="e-Commerce">e-Commerce</option>

  <option value="Streaming/DVD">Streaming/DVD</option>

</select>

<p class="label">
Budget Range(Required) 
</p>
<select name="budgrange">

	<option value="">Select a range</option>

  <option value="$500,000+">$500,000+</option>

  <option value="$250,000 - $500,000">$250,000 - $500,000</option>

  <option value="$100,000 - $250,000">$100,000 - $250,000</option>

  <option value="$50,000 - 100,000">$50,000 - 100,000</option>

  <option value="$25,000 - $50,000">$25,000 - $50,000</option>

  <option value="$0 - $25,000.00">$0 - $25,000.00</option>

</select>


<p class="label">
Project Objectives(Required) 
</p>
<p><input type="checkbox" name="projobj" value="Increase sales" class="objcheckbox" />Increase Sales</p>
<p><input type="checkbox" name="projobj" value="Lower costs" class="objcheckbox" />Lower Cost</p>

<p><input type="checkbox" name="projobj" value="Improve site usability" class="objcheckbox" />Improve site usability</p>

<p><input type="checkbox" name="projobj" value="Build brand awareness" class="objcheckbox" />Build brand awareness</p>

<p><input type="checkbox" name="projobj" value="Increase site traffic" class="objcheckbox" />Increase site traffic</p>

<p><input type="checkbox" name="projobj" value="Build customer/prospect database" class="objcheckbox" />Build customer/prospect database</p>

<p><input type="checkbox" name="projobj" value="Gather research data" class="objcheckbox" />Gather research data</p>
<p><input type="checkbox" name="projobj" value="Other" class="objcheckbox" />Other</p>

<p><input type="submit" value="Send it" class="butt" title="sendit" /></p>
 </div>
<!-- End #main -->
  
  
  <!-- Begin #sidebar -->
  <div id="sidebar">
  <?php include("inc/nav.inc");?>
	<h2>News</h2>	
  <?php include("inc/news.inc");?>	
  <h2>Edification</h2>
   <?php include("inc/edi.inc");?>	
 <h2>Validation</h2>	
	 <?php include("inc/val.inc");?>	
 </div>
  <!-- End #sidebar -->

<div class="clear">&nbsp;</div>
</div>
<!-- End #content -->

</body>
</html>

 

[cLFlaVA]

does it work for you now?

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[obiwasabi]

Hi,

No it's not working, It simply tries to load the thanks.php form, wether the fields are filled or not.

 

[mwolf00]

<form id="theForm" method="post" action="

http://ckimedia.com/cgi-bin/formmail.pl"/

onSubmit="return isReady(this)">

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[cLFlaVA]

you're not calling any functions in the form's onsubmit event.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[obiwasabi]

Hi,

In the finished code above i'm using:

<form id="theForm" onSubmit = "return isReady(this)" method="post" action="

http://ckimedia.com/cgi-bin/formmail.pl"/>

 

[cLFlaVA]

That's kind of a lot of code to look through and debug. I suggest you take a look at the JavaScript FAQ section where there are plenty of validation resources available.

If you have a more specific question after looking through those, feel free to post back.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[mwolf00]

obi - one last thing - try building your code one section at a time - start by validating one field and check your code...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[obiwasabi]

Hi,

Funny, that's exactly what I was doing as you commented

Have a Merry, Merry
obi