Client Side immediate validation JavaScript Required. NB!!!

[Corne]

Hi, Me Again,

Client Side immediate validation JavaScript is my issue this time.

I have the following fields in my grid:

1. Age [Current Age in years i.e. 15]
   
2. ClassMinAge [Min age i.e. 14]
   
3. ClassMaxAge [Max age i.e. 17]
4. RaceClass [ OR1 - Class OR1 was chosen by a Radio Button. Other classes in the same radio button choices are OR2 & OR3]

Immediate Validation Required when user "clicks" the RaceClass button for either option OR1, OR2 or OR3.

1. If Age is > than ClassMinAge AND < than ClassMaxAge AND the button for OR1 [class for ages between 14 and 17] is clicked, the result will be fine and correct.
2. If Age is > than ClassMinAge AND < than ClassMaxAge AND the button for OR2/OR3 is clicked, the result will be incorrect and a message should be displayed "Not correct Age for Class".
   
3. If Age is < than ClassMinAge the result will be incorrect and a message should be displayed "To Young for Class".
4. If Age is > than ClassMaxAge the result will be incorrect and a message should be displayed "To Old for Class".

I have tested standard example validation script and it does work correctly, however, the above script is way beyond me currently.
PLSE assist me in getting the correct script.

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

ANYBODY PLSE !!!

Advice on what videos/documentation I can study would also be appreciated please.

[DaveF]

Re: Client Side immediate validation JavaScript Required. NB!!!

Cornelius,

Can you include more information about what you are trying to accomplish? The more information you provide the easier it will be for someone to help. Be as specific as possible. A screen shot of your grid would be nice.

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Hi Dave,

Thanks for the feedback. I made some changes to my explanations. The entrant is a Junior competing in a senior race event. If a junior enters a senior race event then they are only allowed to enter the HighSchoolClass AND only if they are between the ages of 14 to 17 and they ride a motorcycle with a certain engine size.

My scenario below is for the radio button validation to verify the above IF and WHEN the junior entrant chooses a NOT ALLOWED class which would be OR1, OR2, OR3. The message should then popup with a warning. Silver Class starting age is 16 which makes it an allowed race for the age group.

• RaceType � [Choice between Senior Event & Junior Event. This example is a senior event]
• Age � [Age id days to determine exact age. 1 day makes a difference]
• RaceNr � [Official Race number allocated to competitor [Quad numbers start with a L]
• BikeType � [Choice between Motorcycle & Quad. Each has its own classes]
• EngineCapacity � [Choices of different capacities, The bike chosen by the entrant is �Less than 251cc�]
• Stroke � [Choice between 2-Stroke & 4-Stroke]
• SeniorPrimaryClass � [Radio Buttons with the senior motorcycle classes]
• HighSchoolClassMinAge � [Min Age to enter Highschool class, Including 14]
• HighSchoolClassMaxAge � [Max Age to enter Highschool class, below 17, not 17]
• OR3SilverClassMinAge � [Min Age to enter OR3 & Silver Class, including 16]
• OR1OR2Class � [Min Age to enter OR1 & OR2 class, including 18]

Scenario description:

• A competitor with the Age of 14.29 enters a senior race
• The competitor rides a motorcycle with enigine size �< 251cc 4 stroke�
• The competitor chooses OR1 as the class he/she wants to compete in [Not Allowed]

Validation must [on button click for OR1] check if the competitor�s credentials are allowed to enter the OR1 class;

• Is the race number valid for a motorcycle race [if starting with a �L� then no motorcycle classes can be entered]
• Is the age valid for OR1 class?
• Is the Engine capacity allowed in the OR1 class

Motorcycle classes and engine capacities allowed per class
OR1 Class

1. 2 stroke > than 251cc
2. 4 stroke > than 401cc

OR2 Class

1. 202cc 2 stroke to 251cc 2 stroke
2. 252cc 4 stroke to 401cc 4 stroke

OR3 Class

1. < 201cc 2 stroke
2. < 251cc 4 stroke

HighSchool Class

1. < 201cc 2 stroke
2. < 251cc 4 stroke

Ages allowed per class
OR1 - Age>=18
OR2 - Age>=18
OR3 & Silverclass - Age>=16
HighSchool - Age>=14 and <17

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Apologies, The entries below is actually database fields and some descriptions of their respective functionalities.

•RaceType – [Choice between Senior Event & Junior Event. This example is a senior event]
•Age – [Age id days to determine exact age. 1 day makes a difference]
•RaceNr – [Official Race number allocated to competitor [Quad numbers start with a L]
•BikeType – [Choice between Motorcycle & Quad. Each has its own classes]
•EngineCapacity – [Choices of different capacities, The bike chosen by the entrant is “Less than 251cc”]
•Stroke – [Choice between 2-Stroke & 4-Stroke]
•SeniorPrimaryClass – [Radio Buttons with the senior motorcycle classes]
•HighSchoolClassMinAge – [Min Age to enter Highschool class, Including 14]
•HighSchoolClassMaxAge – [Max Age to enter Highschool class, below 17, not 17]
•OR3SilverClassMinAge – [Min Age to enter OR3 & Silver Class, including 16]
•OR1OR2Class – [Min Age to enter OR1 & OR2 class, including 18]

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Once again SOOOORRRRYYYYY

Attached is an image of the actual screenEntry Form.jpg

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

In the end I will adapt your code for each button choice to be made. I need to start learning this somewhere.

[DaveF]

Re: Client Side immediate validation JavaScript Required. NB!!!

This will hopefully give you an idea of what you need to do. Select the OR1OR2Class control in the Controls view and double click on the "Validation Javascript" property. Enter the following code. Be sure to double check the field names and the logic. I may not have understood everything correctly.

var ClassMinAge = 14;
var ClassMaxAge = 17;
var Age = $u.s.toNum({dialog.object}.getValue('Age'));

if (OR1OR2Class == 'OR1')
{
    if (Age < ClassMinAge)
    {
        return 'Too young for Class';
    }
    if (Age > ClassMaxAge)
    {
        return 'Too old for Class';
    }
}

if (OR1OR2Class == 'OR2' || OR1OR2Class == 'OR3')
{
    if (Age >= ClassMinAge && Age <= ClassMaxAge)
    {
        return 'Not correct Age for Class';
    }	
}

return false;

Do you have a Submit button on your form to update the data to your database? You may also need to add validation logic to the server-side event dialogValidate if it allows you to submit when there are validation errors. You have to use Xbasic however, which is different than Javascript. There is an example in the event showing you how to validate fields.

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Hi Dave

I have adapted the code to represent the correct fields, but it still don't work. I see on the examples that they state to use "Data" to refer to the value in the control to be validated.
I also call the data from the other fields as the ages might change in future, which means I will have to "code" change them to work then.

var ClassHighSchoolMinAge = $u.s.toNum({dialog.object}.getValue('ClassHighSchoolMinAge'));
var ClassHighSchoolMaxAge = $u.s.toNum({dialog.object}.getValue('ClassHighSchoolMaxAge'));
var Age = $u.s.toNum({dialog.object}.getValue('Age'));

if (PrimaryClass == 'OR1')
{
if (Age < ClassHighSchoolMinAge)
{
return 'Too young for Class';
}
if (Age > ClassHighSchoolMaxAge)
{
return 'Too old for Class';
}
}
if (PrimaryClass == 'OR2' || PrimaryClass == 'OR3')
{
if (Age >= ClassHighSchoolMinAge && Age <= ClassHighSchoolMaxAge)
{
return 'Not correct Age for Class';
} else {
return false;
}

[DaveF]

Re: Client Side immediate validation JavaScript Required. NB!!!

You don't have to use "data" to refer to the field. I didn't use it in this example because you are using more than 1 data field in your validation logic. I also thought that you may want to add this validation logic to the Age control as well. You could copy and paste the same code for the "Age" JavaScript validation property. If you used "data", it would not work.

You can't use "else", otherwise the callback may not return "false" when there are no validation errors. I'm not sure what will happen if it does not return "false":

if (PrimaryClass == 'OR1') 
{
     if (Age < ClassHighSchoolMinAge)
     {
          return 'Too young for Class';
     }
     if (Age > ClassHighSchoolMaxAge)
     {
          return 'Too old for Class';
     }
}

if (PrimaryClass == 'OR2' || PrimaryClass == 'OR3')
{
     if (Age >= ClassHighSchoolMinAge && Age <= ClassHighSchoolMaxAge)
     {
          return 'Not correct Age for Class';
     }
}

return false;

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Hi Dave,

Thanks a lot, I seem to have the basic validation scripts working as it should [See below].

What i'm still battling with is the following;

• Do a validation whereby i check if a race number starts specifically with a "L". If yes then pop a message stating that this is not a valid motorcycle race number.

The code below works fine as you suggested, however when I validate more than 1 field, it does not run.
Example:

The code below works fine on the min & max age, but I still need to validate against the engine capacity as well.
Where would I put this statement. [If(Enginecapacity <> 'Bigger than 251cc')

/* HighSchool Class validation */
if(SPrimClass == 'HighSchool')
{
if(AgeN < HSMinAgeN || AgeN > HSMaxAgeN)
{
return 'You must be older than 14 and younger than 16 to enter HighSchool class';
}
}

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Sorry Dave,

Below the code
/* OR1 & OR2 Age & Engin Class validation */
if(SPrimClass == 'OR1' || SPrimClass == 'OR2')
{
if(AgeN < Or12MinAgeN)
{
return 'You must be older than 18 for Class OR1 & OR2';
}
}

if(SPrimClass == 'OR1')
{
if(EngineSize <> 'Bigger Than 401cc')
{
return 'Engin Size';
}
}

[DaveF]

Re: Client Side immediate validation JavaScript Required. NB!!!

When you say it doesn't work, what does it do exactly? Do you get an error message? You can also insert alerts into the validation code to make sure the values of the fields are what you think they are? Or you might also display some text so you know the code executed to that point. For example:

/* OR1 & OR2 Age & Engin Class validation */
if (SPrimClass == 'OR1' || SPrimClass == 'OR2')
{
     if(AgeN < Or12MinAgeN)
     {
          return 'You must be older than 18 for Class OR1 & OR2';
     }
}

alert(EngineSize );    // This will display the value of the EngineSize field in an alert dialog. You can add as many alert statements as you want.
                       // If you have more than one alert, you may want to display some static data so you know what you are look at.
                       // For example, alert('Engine size = ' + EngineSize);                              

if (SPrimClass == 'OR1')
{
     if (EngineSize != 'Bigger Than 401cc')     // <-- Use "!=" and not "<>"
     {
          return 'Invalid engine size.';
     }
}

alert('Made it here.');  // Display some arbitrary text so I know the code executed to this point.

return false;

[Corne]

Re: Client Side immediate validation JavaScript Required. NB!!!

Hi Dave,

Nope, no errors at all. It just "tries" to load the page, but never completes. I think it cannot "understand" the code.

Let me try the alerts above. I'll let you know.

The != means "is not" ??

[DaveF]

Re: Client Side immediate validation JavaScript Required. NB!!!

It won't even render your UX component? If not, does it render if you remove all of the JavaScript validation code?

You said earlier that you got it to partially work, but it wasn't doing all of the validation checking that you wanted. Did it render the component and execute the first part of the validation code correctly? If so, did it stop working when you added the additional code to check the engine size? Let me know exactly what is working and what is not.

Also, if you want to check the race number to see if the first character is equal to "L", you would enter the following:

if (RaceNr.length > 0 && RaceNr[0] == 'L')
{
     return 'Invalid race number';
}

You need to make sure the Race Number is greater than 0, otherwise you will get an error if it is left blank.