validating a form field, must be a number and not empty 3

[peeryowen]

Hi, I looked through the FAQs but I really don't think I need a loop here, which seemed to be the solutions proposed there. I have never had to write my own javascript but now the boss say I have to so I am trying to start simple.

I have a simple HTML form where each form element has a name. I am able to make the other validations work but not the one on a field called zoneQuantite. It is the number of tickets requested. I want to check that it is not empty and give an alert if it is and then check that the number entered is a number. I'm sure it is simple but I cannot get it to work.

My javascript is this

function validateQuantite(quantiteText) 
{
     if (quantiteText.value.length==0)
     {
          alert("Le champ est vide, veuillez saisir un numéro");
          return(false);
      }                   
     else
          {
          return(true);
          }
     
     if (isNaN(quantiteText))
     {
          alert("Vous n'avez pas saisie un numéro, veuillez saisir un numéro");
          return(true);
     }
     else
          {
          return(false);
          }
}

quantiteText takes it's value from the zoneQuantite on the HTML form.

I tried writing it as an elseif statement but I must not have done it correctly because it didn't work. I know there are errors above but this is the clearest way I have written it to show what I wanted to do.

If it is empty, tell them it is empty and that they must enter a number. Then if it has a value in the field but it is not a number tell them they have not entered a number and they must enter a number, in case you don't read French.

Thanks

 

[feherke]

Hi

The execution hits a [tt]return[/tt] on both branches of the first [tt]if[/tt], so the second [tt]if[/tt] will never be executed. Besite that, you should check the [tt]value[/tt] property of the element, not the element itself.

To follow your coding style :

[b]function[/b] [COLOR=darkgoldenrod]validateQuantite[/color][teal]([/teal]quantiteText[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]quantiteText[teal].[/teal]value[teal].[/teal]length[teal]==[/teal][purple]0[/purple][teal])[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"Le champ est vide, veuillez saisir un numéro"[/i][/green][teal]);[/teal]
    [b]return[/b][teal]([/teal][b]false[/b][teal]);[/teal]
  [teal]}[/teal] [b]else[/b] [teal]{[/teal]
    [b]if[/b] [teal]([/teal][COLOR=darkgoldenrod]isNaN[/color][teal]([/teal]quantiteText[teal].[/teal]value[teal]))[/teal] [teal]{[/teal]
      [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"Vous n'avez pas saisie un numéro, veuillez saisir un numéro"[/i][/green][teal]);[/teal]
      [b]return[/b][teal]([/teal][b]false[/b][teal]);[/teal]
    [teal]}[/teal] [b]else[/b] [teal]{[/teal]
      [b]return[/b][teal]([/teal][b]true[/b][teal]);[/teal]
    [teal]}[/teal]
  [teal]}[/teal]
[teal]}[/teal]

But personally I prefer this way :

[b]function[/b] [COLOR=darkgoldenrod]validateQuantite[/color][teal]([/teal]quantiteText[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal]([/teal]quantiteText[teal].[/teal]value[teal].[/teal]length[teal]==[/teal][purple]0[/purple][teal])[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"Le champ est vide, veuillez saisir un numéro"[/i][/green][teal]);[/teal]
    [b]return[/b] [b]false[/b][teal];[/teal]
  [teal]}[/teal]
  [b]if[/b] [teal]([/teal][COLOR=darkgoldenrod]isNaN[/color][teal]([/teal]quantiteText[teal].[/teal]value[teal]))[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"Vous n'avez pas saisie un numéro, veuillez saisir un numéro"[/i][/green][teal]);[/teal]
    [b]return[/b] [b]false[/b][teal];[/teal]
  [teal]}[/teal]
  [b]return[/b] [b]true[/b][teal];[/teal]
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[feherke]

Hi

By the way, you know that client-side validation can be extremely easily disabled/bypassed/faked, right ?

Feherke.

http://free.rootshell.be/~feherke/

 

[peeryowen]

Feherke you are too kind, you said, "To follow your coding style", evidently I don't have a coding style in javascript. Is your method a standard way? I don't know how to code in javascript so I wrote it the way I write html or css. I should probably learn a standard way so that I can better read javascript to analyse and copy it.

My knowledge of javascript is limited. I think of browser scripting as validating certain elements before it is sent to the server to reduce server load. I'm under the impression that validating some non sensitive items in a form is good to do in javascript so as not to waste server power on things that can be done before the info goes to the server. For example the number of tickets ordered, we want to make sure it is a number and that it is not empty, why send it all the way to the server to have it sent back empty or not valid.

What is the better way to do such things. A link is fine too, I don't mind reading more.

Since we are on the subject, I'm trying to validate email addresses. My code works but I don't think it is thorough. It makes sure the @ comes before the . and that the @ cannot begin the field but it will validate if the . is at the end of the email address and I want to make sure there are at least 2 characters after the . I think.

function validateEmail(emailText) {
     with (emailText)
     {
     apos=value.indexOf("@");
     dotpos=value.lastIndexOf(".");
     if (apos < 1 || dotpos-apos < 2)
          {alert("Veuillez saisir une adresse mail valide"); emailText.focus();return false;}
     else {return true;}
     }
}

How do you manage to keep the code coloring when you add it here?

 

[jmeckley]

I would recommend using a js library like jquery (or prototype, moo tools, etc). On of the issues with client scirpting is browsers interpret js differently. IE, FF, Opera, etc all have a slightly different twist on certain features. writing raw js means you need to account for this.

using a js library all of this is done for you, so your scripts are left to focus on the actual need. for example jquery has a validation plug-in with many default types already available: required, date, number, range, email, phone number, etc. follow the link for examples.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[feherke]

Hi

Is your method a standard way?

Generally it is not. However, there are projects where participants must use no [tt]else[/tt] when one branch of the [tt]if[/tt] ends with [tt]return[/tt]. Not only in JavaScript, in other languages too.

Regarding your e-mail address validation function, currently accepts "_@@.". I mean, there can be any number of at ( @ ) characters. Personally I would use a regular expression :

[b]function[/b] [COLOR=darkgoldenrod]validateEmail[/color][teal]([/teal]emailText[teal])[/teal]
[teal]{[/teal]
  [b]if[/b] [teal](![/teal]emailText[teal].[/teal]value[teal].[/teal][COLOR=darkgoldenrod]match[/color][teal]([/teal][fuchsia]/^\w+(\.\w+)*@(\w+\.)+\w{2,}$/[/fuchsia][teal]))[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]alert[/color][teal]([/teal][green][i]"Veuillez saisir une adresse mail valide"[/i][/green][teal]);[/teal]
    emailText[teal].[/teal][COLOR=darkgoldenrod]focus[/color][teal]();[/teal]
    [b]return[/b] [b]false[/b][teal];[/teal]
  [teal]}[/teal]
  [b]return[/b] [b]true[/b][teal];[/teal]
[teal]}[/teal]

Feherke.

http://free.rootshell.be/~feherke/

 

[peeryowen]

Thanks again feherke but I don't understand anything regarding regular expressions. I am starting from scratch. I think I am going to use the jQuery method. I want to practice writing raw js just to better understand how it works, but maybe there are better ways to do this.

 

[feherke]

Hi

[tt][red][small][ignore][biased][/ignore][/small][/red][/tt]
Regular expression is a "portable" knowledge. Many languages have support for regular expression based matching, substituting, splitting. You learn them once then you only have the adjust the syntax if needed when moving to another programming language. Beside languages, there are also simple tools which use regular expressions.

JavaScript libraries are very useful if you want to produce some wiggling things, where the incompatibility between browsers is significant. I would say, [tt]form[/tt] validation is definitely not the case.
[tt][red][small][ignore][/biased][/ignore][/small][/red][/tt]

No intention to influence anybody's decision. Just a different opinion.

Feherke.

http://free.rootshell.be/~feherke/

 

[IPGuru]

My knowledge of javascript is limited. I think of browser scripting as validating certain elements before it is sent to the server to reduce server load. I'm under the impression that validating some non sensitive items in a form is good to do in javascript so as not to waste server power on things that can be done before the info goes to the server. For example the number of tickets ordered, we want to make sure it is a number and that it is not empty, why send it all the way to the server to have it sent back empty or not valid.

Generaly speaking Client side validation is done to provide a friendlier USER experience.
although it will reduce server load by not sending incomplete/invalid forms the server should still validate all input because this data is easily faked & can expose your site to hacking.

to quote the X files -"Trust No-one

 

[peeryowen]

Generaly speaking Client side validation is done to provide a friendlier USER experience.
although it will reduce server load by not sending incomplete/invalid forms the server should still validate all input because this data is easily faked & can expose your site to hacking.

Does this mean do client side validation so the user is prompted at each step if there is a problem AND do server side validation because it is more secure

OR

Don't bother with client side validation like javascript?

What is javascript good for then?

Thanks this has been very illuminating.

 

[jmeckley]

js allows you do design a better user experience at the UI. for example basic validation, ajax, and pretty UI controls (jquery UI is a great example). without js your page is static once rendered to the browser.

preformance is a slippery slope. while it's good to be thinking about efficient processing, premature-optimization can actually kill maintainability. When optimizing preformance 3 things should be considered before making changes to the code.
1. does the user perceive a given operation is slow? If the user doesn't have a problem with preformance there is no need to optimize. (user in this case is general, it could be an end-user, client, project manager, QA...)
2. Where is the operation slow and how slow is it? This will be determined with profiling metrics. different languages have different profilers. these tools can pinpoint where the bottleneck is.

typically accessing remote resources is where the biggest bottlenecks are. your code has to wait for the other process to return results before continuing. the most common examples of this are accessing a database, access files, sending a email, and accessing a web service. there are various methods to handle each scenario.

if you're interested in system design I would recommend forum678 for those types of questions. So far that's the best TT forum I found for system architecture.


Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

 

[feherke]

Hi

What is javascript good for then?

World of Solitaire, JavaScript-Mahjong, DHTML Lemmings, ... ;-)

Otherwise I completely agree with IPGuru's wording, "provide a friendlier USER experience". The site should be functional without JavaScript, so robots, visitors with disabilities and visitors with dumb browsers be able to use the site. For other visitors, JavaScript can be used to enhance the experience.

Feherke.

http://free.rootshell.be/~feherke/