Prev: Efficient use of setTimeout ?
Next: problem in querystring
From: Openside on 4 Mar 2006 13:37
Hi,

I am fairly green when it comes to JavaScript. I have the Form
Validation below for 3 textarea fields. It works fine, but if none of
the fields are filled out then 3 consequtive alert boxes pop up.How can
I modify the script to only prompt the user one field at a time?

The Script I have is:

<script language="JavaScript">
<!--

function valform ( )
{
valid = true;

if ( document.recipeform.directions.value == "" )
{
alert ( "Please enter the directions of the recipe." );
valid = false;
}

if ( document.recipeform.description.value == "" )
{
alert ( "Please enter the description of the recipe." );
valid = false;
}

if ( document.recipeform.ingredients.value == "" )
{
alert ( "Please enter the ingredients of the recipe." );
valid = false;
}

return valid;
}

//-->
</script>

thanks,

Openside

From: TheBigSearchEngine on 4 Mar 2006 14:31
You can use something like this:

<script language="JavaScript">
<!--

function valform () {
var msg = '';

if ( document.recipeform.directions.value == "" ) {
msg .= "Please enter the directions of the recipe.\n";
}


if ( document.recipeform.description.value == "" ) {
msg += "Please enter the description of the recipe.\n";
}


if ( document.recipeform.ingredients.value == "" ) {
msg .= "Please enter the ingredients of the recipe.\n";
}

if(msg != '') {
alert(msg);
return false;
}
return true;
}

//-->
</script>

From: Thomas 'PointedEars' Lahn on 4 Mar 2006 16:01
TheBigSearchEngine wrote:
^^^^^^^^^^^^^^^^^^
Posting with such a ridiculous "name" does not increase credibility of a
poster. Posting such ridiculous nonsense as below is only another proof
to justify this preconception.

> You can use something like this:

But you should not. Not at all.

> <script language="JavaScript">

The `language' attribute is deprecated, the `type' attribute is required in
HTML 4:

<script type="text/javascript">

> <!--

Trying to comment out `script' element content has always been nonsense.

> function valform () {
> var msg = '';
>
> if ( document.recipeform.directions.value == "" ) {

Standards compliant referencing would be

if (document.forms['recipeform'].elements['directions'].value == "")
{

However, it is more efficient and less error-prone if one passes the `this'
reference in the `onsubmit' event handler attribute value to the validation
method, and use its named argument instead. Say if the method was called
with

<form ... onsubmit="return valform(this);">

and defined as

function valform(f)
{
//
}

one would use

if (f.elements['directions'].value == "")

instead. Because the reference `f.elements' would be used afterwards, it
is more efficient to assign it to a local variable and use that variable
instead. This approach also facilitates a basic feature test:

function valform(f)
{
var es;
if (f && (es = f.elements))
{
if (es['directions'].value == "")
{
// ...
}

// ...
}

return true;
}

<URL:http://pointedears.de/scripts/test/whatami>

> msg .= "Please enter the directions of the recipe.\n";

The string concatenation operator in ECMAScript implementations is `+',
not `.' (as in PHP). The string concatenation operation `+=' is generally
inefficient compared to the available alternatives (even in PHP).

However, ...

> }
>
>
> if ( document.recipeform.description.value == "" ) {
> msg += "Please enter the description of the recipe.\n";
> }
>
>
> if ( document.recipeform.ingredients.value == "" ) {
> msg .= "Please enter the ingredients of the recipe.\n";
^^
(See above.)

> }

.... this approach is hardly user-friendly. A user-friendly approach would
present the user with a list of data that are missing, embedded in the
message, not the same sentence with only different parts again and again.

> if(msg != '') {
> alert(msg);
> return false;
> }
> return true;
> }
>
> //-->
> </script>

Therefore:

<meta http-equiv="Content-Script-Type" content="text/javascript">
....
<form ... onsubmit="return valform(this);">
<script type="text/javascript">
function valform(f)
{
var es;
if (f && (es = f.elements))
{
    var
// or `new Array()', for JavaScript 1.1 and 1.2
aMissing = [],

// or `new RegExp()', for JavaScript 1.1/JScript 2.0
rxNotEmpty = /\S/;

    if (!rxNotEmpty.test(es['directions'].value))
{
// or `aMissing[aMissing.length] = "..."',
// for JavaScript 1.2/JScript 2.0
    aMissing.push("- directions of the recipe");
    }

    if (!rxNotEmpty.test(es['description'].value))
{
        aMissing.push("- description of the recipe");
    }

    if (!rxNotEmpty.test(es['ingredients'].value))
{
        aMissing.push("- ingredients of the recipe.");
}

    if (aMissing.length > 0)
{
       window.alert(
'Please provide the following information:\n\n'
+ aMissing.join("\n"));
      return false;
    }
}

    return true;
}
</script>
...
</form>

However, neither of the above is news here. Ask yourself
("TheBigSearchEngine") for "form validation".


PointedEars
From: Randy Webb on 4 Mar 2006 17:13
Thomas 'PointedEars' Lahn said the following on 3/4/2006 4:01 PM:
> TheBigSearchEngine wrote:
> ^^^^^^^^^^^^^^^^^^
> Posting with such a ridiculous "name" does not increase credibility of a
> poster.

It's no different than you using "PointedEars" in your name. Usenet is
anonymous, deal with it.

> Posting such ridiculous nonsense as below is only another proof
> to justify this preconception.

Agreed

<snip>

>> function valform () {
>> var msg = '';
>>
>> if ( document.recipeform.directions.value == "" ) {
>
> Standards compliant referencing would be
>
> if (document.forms['recipeform'].elements['directions'].value == "")
> {

But that is nonsense and has been debated here so many times it gets
old. Either way is "acceptable" and "compliant".

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
From: Thomas 'PointedEars' Lahn on 4 Mar 2006 17:48
Randy Webb wrote:

> Thomas 'PointedEars' Lahn said the following on 3/4/2006 4:01 PM:
>> TheBigSearchEngine wrote:
>> ^^^^^^^^^^^^^^^^^^
>> Posting with such a ridiculous "name" does not increase credibility
>> of a poster.
>
> It's no different than you using "PointedEars" in your name.

I expected as much from you. One day you will probably recognize the
difference between a nickname provided along with the real name, and a
pseudonym.

> Usenet is anonymous, deal with it.

Usenet is _not_ anonymous. One may use a pseudonym, but that is a
completely different thing.


PointedEars
 |  Next  |  Last
Pages: 1 2
Prev: Efficient use of setTimeout ?
Next: problem in querystring