Forums | MacLife

b_dubb · 2008-09-12 2:54 pm

Code:

<script type="text/javascript">
<!--

  function validate_form ( )
  {
  valid = true;

  var fieldValue1 = "Listing of equipment to be picked up:\n";
  var fieldValue2 = "Bldg:\nFloor:\nLocatioin:\nSite:\n";

  var emptyMessage1 = "";
  var emptyMessage2 = "";

  if ( document.release.amount.value == fieldValue1 || document.release.amount.value == "" )

  {
    var emptyMessage1="Please provide a description of the equipment.\n";
    valid = false;
  }

  if ( document.release.fromwhere.value == fieldValue2 || document.release.fromwhere.value == "" )

  {
    var emptyMessage2="Please provide detailed location information for the equipment.\n";
    valid = false;
  } 

  if ( emptyMessage1 != ""  && emptyMessage2 == "" )
  {
    alert ( emptyMessage1 );
  }
  else if ( emptyMessage1 == "" && emptyMessage2 != "" )
  {
    alert ( emptyMessage2 );
  }
  else if ( emptyMessage1 != "" && emptyMessage2 != "" )
  {
    var emptyMessage3 = emptyMessage1 + emptyMessage2;
    alert ( emptyMessage3 );
  }
  return valid;

}

-->
</script>

so i've got a form that i went to do client side validation on (do server side validation after submit). there are two <textarea> input tags (not my idea but i'm stuck with them) that are prepopulated with fieldValue1 and fieldValue2 . there are a couple problems. the second error message never gets thrown (which also means the third condition never gets thrown). and Internet Exploder won't even flinch when i test in IE. any thoughts? suggestions?

thanks in advance for any help offered.

b

UPDATE - IE has decided to exectute the alert() s .... but after clicking the alert boxes ... submits the form anyway. should halt the browser. for the most part ... behaves as expected in FF.

Last edited by b_dubb (2008-09-12 3:21 pm)

matt · 2008-09-12 5:07 pm

On which page are you using this?

Booksley · 2008-09-12 8:33 pm

Yeah, we're going to need the html page to go with this...

b_dubb · 2008-09-12 11:58 pm

i can't link you to the page. its on a company intranet. here's how the script is triggered ...

Code:

<form name="release" action="self.php" onSubmit="validate_function();">

<textarea name="amount">

fieldValue1

</textarea>


<textarea name="wherefrom">

fieldValue2

</textarea>


<submit button>

</form>

b_dubb · 2008-09-14 9:55 pm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
<!--

  function validate_form ( )
  {

  valid = true;

  var fieldValue1 = "Listing of equipment to be picked up:\n";
  var fieldValue2 = "Bldg:\nFloor:\nLocatioin:\nSite:\n";

  var emptyMessage1 = "";
  var emptyMessage2 = "";

  if ( document.release.amount.value == fieldValue1 || document.release.amount.value == "" )
  {
    var emptyMessage1="Please provide a description of the equipment\n";
  }

  if ( document.release.fromwhere.value == fieldValue2 || document.release.fromwhere.value == "" )
  {
    var emptyMessage2="Please provide detailed location information for the equipment\n";
  } 

  if ( emptyMessage1 != ""  && emptyMessage2 == "" )
  {
    alert ( emptyMessage1 );
    valid = false;
  }
  else if ( emptyMessage1 == "" && emptyMessage2 != "" )
  {
    alert ( emptyMessage2 );
    valid = false;
  }
  else if ( emptyMessage1 != "" && emptyMessage2 != "" )
  {
    var emptyMessage3 = emptyMessage1 + emptyMessage2;
    alert ( emptyMessage3 );
    valid = false;
  }

  return valid;

}

-->
</script>

</head>

<body>

<form name="release" method="post" action="process.php" onSubmit="return validate_form( );">

<p>Equipment to be picked up:</p>
<textarea class="text" name="amount" cols="40" rows="3">
Listing of equipment to be picked up:
</textarea>
</label>

<p>Equipment Location</p>
<textarea class="text" name="fromwhere" cols="40" rows="4">
Bldg:
Floor:
Location:
Site:
</textarea>

<p><input type="submit" name="submit"  /></p>

</form>

</body>

</html>

sanitized for easy consumption ... full version is a real beast

b

Last edited by b_dubb (2008-09-14 10:12 pm)

matt · 2008-09-14 11:32 pm

Something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<title>Validating Form</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
// <![CDATA[

function validate_form()
{
    valid = true;

    var fieldValue1 = "Listing of equipment to be picked up:";
    var fieldValue2 = "Bldg:\nFloor:\nLocation:\nSite:";

    var emptyMessage1 = '';
    var emptyMessage2 = '';

    if ( document.getElementById('amount').value === fieldValue1 || document.getElementById('amount').value === '' )
    {
        var emptyMessage1 = "Please provide a description of the equipment.\n";
        valid = false;
    }

    if ( document.getElementById('fromwhere').value === fieldValue2 || document.getElementById('fromwhere').value === '' )
    {
        var emptyMessage2 = "Please provide detailed location information for the equipment.\n";
        valid = false;
    }

    if ( emptyMessage1 !== ''    && emptyMessage2 === '' )
    {
        alert( emptyMessage1 );
    }
    else if ( emptyMessage1 === '' && emptyMessage2 !== '' )
    {
        alert( emptyMessage2 );
    }
    else if ( emptyMessage1 !== '' && emptyMessage2 !== '' )
    {
        var emptyMessage3 = emptyMessage1 + emptyMessage2;
        alert( emptyMessage3 );
    }
    return valid;
}

// ]]>
</script>

</head>

<body>

<form id="release" method="post" action="process.php" onsubmit="return validate_form( );">
<div>
    <p><label for="amount">Equipment to be picked up:</label></p>

    <textarea class="text" id="amount" name="amount" cols="40" rows="3">Listing of equipment to be picked up:</textarea>

    
    <p><label for="fromwhere">Equipment Location:</label></p>
    <textarea class="text" id="fromwhere" name="fromwhere" cols="40" rows="4">Bldg:
Floor:
Location:
Site:</textarea>

    <p><input type="submit" name="submit"  /></p>
</div>
</form>

</body>

</html>

The <label> tag lets you make it so the Equipment to be picked up: and Equipment Location: may be clicked on to activate their respective textareas. That makes filling out the forms easier.

The id= attribute should be used in addition to(and sometimes in place of) the name= attribute. You can check your code using the HTML validator. I added id= attributes to the amount and fromwhere elements and accessed them using javascript that was slightly different from what you had before.

b_dubb · 2008-09-15 7:56 am

my script works until it tests for the second input value. its a headscratcher. thanks for your input.

matt · 2008-09-15 1:27 pm

The version I posted works in Firefox, Safari, Opera and Internet Explorer.

b_dubb · 2008-09-15 1:27 pm

i've got it working in every browser but IE. surprise.

isn't microsoft just smurfy?

b

b_dubb · 2008-09-22 2:58 pm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--

  function validate_form ( )
  {

  valid = true;

  var fieldValue1 = "Listing of equipment to be picked up:\n";
  alert ( fieldValue1 );
  var fieldValue2 = "Bldg:\nFloor:\nLocation:\nSite:\n";
  alert ( fieldValue2 );

  var userAmount = document.release.amount.value;
  alert ( userAmount );
  var userFromwhere = document.release.fromwhere.value;
  alert ( userFromwhere );

  var emptyMessage1 = "";
  var emptyMessage2 = "";

  if ( userAmount == fieldValue1 || userAmount  == "" )
  {
    var emptyMessage1="Please provide a description of the equipment\n";
    document.getElementById('amount1').innerHTML = "REQUIRED";
  }

  if ( userFromwhere == fieldValue2 || userFromwhere == "" )
  {
    var emptyMessage2="Please provide detailed location information for the equipment\n";
    document.getElementById('fromwhere1').innerHTML = "REQUIRED";
  } 

  if ( emptyMessage1 != ""  && emptyMessage2 == "" )
  {
    alert ( emptyMessage1 );
    valid = false;
  }
  else if ( emptyMessage1 == "" && emptyMessage2 != "" )
  {
    alert ( emptyMessage2 );
    valid = false;
  }
  else if ( emptyMessage1 != "" && emptyMessage2 != "" )
  {
    var emptyMessage3 = emptyMessage1 + emptyMessage2;
    alert ( emptyMessage3 );
    valid = false;
  }

  return valid;

}

-->
</script>

</head>

<body>
<form name="release" method="post" action="self.php" onsubmit="return validate_form( );">
<p>Equipment to be picked up<span class="required">*</span></p>
<p>
<span id="amount1" style="color:red;"></span><br />
<textarea class="text" id="amount" name="amount" cols="40" rows="3">
Listing of equipment to be picked up:
</textarea>
</p>

<p>
<span id="fromwhere1" style="color:red;"></span><br />
<textarea class="text" id="fromwhere" name="fromwhere" cols="40" rows="4">
Bldg:
Floor:
Location:
Site:
</textarea>
</p>

<p><input type="submit" name="submit" value="Submit" />&nbsp;&nbsp;
<input class="text" type="reset" value="Reset" /></p>

</form>
</body>
</html>

can't get this code to work properly in IE. all other browsers like it fine. tried using getElementById to grab input from form fields. broke everything in IE and FF.

to explain the logic in the script ... check to make sure if the field (textarea) has the prepopulated text or if it is empty. if either of those conditions are true, print alert. else .... process form.

i know IE doesn't like document.formname.fieldname.value but not sure what else to use to grab what's been popped into those fields.

sorry to bug you guys with this. i'm pulling my hair out and cursing redmond at the top of my lungs.

b

Last edited by b_dubb (2008-09-23 10:11 am)

b_dubb · 2008-09-22 3:02 pm

nevermind ...

is McDonald's hiring?

sturner · 2008-09-22 3:32 pm

Yes they are, but they require an MSE certificate.

b_dubb · 2008-09-24 10:01 am

well that's a waste of money ...

b_dubb · 2008-09-29 2:45 pm

matt wrote:
The version I posted works in Firefox, Safari, Opera and Internet Explorer.

your version half worked in IE. the second condition never 'worked' because when IE sees line breaks ... it inserts extra characters ( \r to be exact ). to get the comparison to work i have to run the input from the <textarea> through example_string.replace(/\r\n/g,"\n") .... notice the the 'g' after the expression /\r\n/ ... it says 'replace all occurences of these characters within this string'.

the code ....

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
<!--


function validate_form ( )
{

  var valid = true;

  var fieldValue1 = "Listing of equipment to be picked up:\n";
  var fieldValue2 = "Bldg:\nFloor:\nLocation:\nSite:\n";

  var userAmount = document.getElementById('amount').value;
  var cleanAmount = userAmount.replace(/\r\n/g,"\n");

  var userFromwhere = document.getElementById('fromwhere').value;
  var cleanFromwhere = userFromwhere.replace(/\r\n/g,"\n");

  var emptyMessage1 = "";
  var emptyMessage2 = "";

  /* compare input from required form fields with strings that prepopulate textarea input fields */

  if ( cleanAmount === fieldValue1 || cleanAmount  === "" )
  {
    var emptyMessage1="Please provide a description of the equipment\n";
    document.getElementById('amount1').innerHTML = "*REQUIRED";
  }

  if ( cleanFromwhere === fieldValue2 || cleanFromwhere === "" )
  {
    var emptyMessage2="Please provide detailed location information for the equipment\n";
    document.getElementById('fromwhere1').innerHTML = "*REQUIRED";
  }

  /* test for emptyMessages - print alerts according to what's been set */

  if ( emptyMessage1 !== ""  && emptyMessage2 === "" )
  {
    alert (  emptyMessage1 );
    valid = false;
  }
  else if ( emptyMessage1 == "" && emptyMessage2 != "" )
  {
    alert ( emptyMessage2 );
    valid = false;
  }
  else if ( emptyMessage1 != "" && emptyMessage2 != "" )
  {
    var emptyMessage3 = emptyMessage1 + emptyMessage2;
    alert ( emptyMessage3 );
    valid = false;
  }

  return valid;

}

-->
</script>

</head>

<body>

<form id="release" name="release" method="post" action="process.php" onSubmit="return validate_form( );">

<p>Equipment to be picked up:</p>
<textarea class="text" id="amount" name="amount" cols="40" rows="3">
Listing of equipment to be picked up:

</textarea>
</label>

<p>Equipment Location</p>
<textarea class="text" id="fromwhere" name="fromwhere" cols="40" rows="4">
Bldg:
Floor:
Location:
Site:
</textarea>

<p><input type="submit" name="submit"  /></p>

</form>

</body>

</html>

does anyone use JSlint to validate javascript ? i ran a page through it and it through errors on everything ...

b

matt · 2008-09-29 3:42 pm

I used to use jslint. That's how I got used to using === and !== instead of == and !=.

It's also how I got used to starting my in-page scripts with // <![CDATA[ and ending them with // ]]> instead of starting them with .

A few months ago, jslint started complaining about any javascript contained within the document, preferring that everything be linked externally. I was developing my forums, and had made it so each page could validate as xhtml 1.0 and xhtml 1.1 and so that each page passed jslint.

They did pass jslint for a while, but now jslint has started to complain about things which I don't think it should complain about, like using the type="text/javascript" attribute in script tags and IE-specific comments. I decided that jslint is not always correct in its complaints.

b_dubb · 2008-09-30 10:33 am

matt wrote:
It's also how I got used to starting my in-page scripts with // <![CDATA[ and ending them with // ]]> instead of starting them with .

that's funny. when i submitted my page/script for validation, jslint said that // <![CDATA[ // ]]> was 'dangerous'. it also barfed on double quotes in the DOC TYPE tag and other minor minor stuff. i think that maybe jslint has been 'over-engineered' recently.

oh well. i got a few good pointers out of it. so it serves a purpose. if only to urge one to code better, which is a good kick in the pants. sometimes.

thanks for everyone who chimed in with ideas and code and stuff.

b

Forums | MacLife

#1 2008-09-12 2:54 pm

trouble with javascript .... volunteers?

Code:

#2 2008-09-12 5:07 pm

Re: trouble with javascript .... volunteers?

#3 2008-09-12 8:33 pm

Re: trouble with javascript .... volunteers?

#4 2008-09-12 11:58 pm

Re: trouble with javascript .... volunteers?

Code:

#5 2008-09-14 9:55 pm

Re: trouble with javascript .... volunteers?

Code:

#6 2008-09-14 11:32 pm

Re: trouble with javascript .... volunteers?

Code:

#7 2008-09-15 7:56 am

Re: trouble with javascript .... volunteers?

#8 2008-09-15 1:27 pm

Re: trouble with javascript .... volunteers?

#9 2008-09-15 1:27 pm

Re: trouble with javascript .... volunteers?

#10 2008-09-22 2:58 pm

Re: trouble with javascript .... volunteers?

Code:

#11 2008-09-22 3:02 pm

Re: trouble with javascript .... volunteers?

#12 2008-09-22 3:32 pm

Re: trouble with javascript .... volunteers?

#13 2008-09-24 10:01 am

Re: trouble with javascript .... volunteers?

#14 2008-09-29 2:45 pm

Re: trouble with javascript .... volunteers?

matt wrote:

Code:

#15 2008-09-29 3:42 pm

Re: trouble with javascript .... volunteers?

#16 2008-09-30 10:33 am

Re: trouble with javascript .... volunteers?

matt wrote:

Board footer