client-side validation

[christappan]

I've spent a lot of time validating fields using XBasic but not much with the client-side (Javascript).

I understand it and can write validation that works, but only if the user gives focus to the field (tab, mouse, etc). In the Dialog properties, I've unchecked "Only validate edited fields" and unchecked "Only validate fields whose values were changed." I've also unchecked "Submit dialog if has client-side validation errors."

Is there something I'm missing here? Is there not a way to validate a field client-side without the user giving focus to the field in question?

Thanks in advance...

[lvasic]

Re: client-side validation

Are you using an UX component?

[christappan]

Re: client-side validation

Yes--UX component.

[lvasic]

Re: client-side validation

You can put all of that checking when the user clicks on the save button. Build your own save button and then test all of the fields and if all is good submit.

[christappan]

Re: client-side validation

I assumed I could do that but it seems like a lot of work for functionality that should ideally be built in. Particularly with the offline push--all the useful validation for that has to be client-side. Oh well. Thanks.

[Garry Flanigan]

Re: client-side validation

Is there something I'm missing here? Is there not a way to validate a field client-side without the user giving focus to the field in question?

You can use onBlur or onChange or whatever events in the "Javascript" sections relating to say fieldA and do whatever you like in there, including changing data in other fields. For example you may onBlur of a DOB field calculate and set the Age in a different field with {dialog.object}.setValue() .

[christappan]

Re: client-side validation

Thanks Garry. My concern is that it appears the validation check is only triggered when I give focus to the field.

So say I have 5 fields on my UX, all with client-side validation rules requiring a value be entered. When the UX is opened, focus is on the first field. My user enters valid information, then uses her mouse to (skip over fields 2 through 4 and) click on the fifth field, where she puts valid info. She clicks save, and the validation rules for questions 2 through 4 never fire. Her record saved successfully but bypassed my validation rules for questions 2 through 4.

[Garry Flanigan]

Re: client-side validation

I suggest you make a new ux and put on 4 fields and set the rules then run. It should raise errors on required fields with no data entered, This will at least prove that things work as they should. I use the client side rules frequently and they do work as required with the specified events. You do not need to give focus to fields if you program accordingly.
Then the question is why your existing UX is not working as expected. I have experienced unexpected beaviour on UX that I have made countless changes and somehow managed to corrupt or put in some Javascript that later becomes obsolete.
As an aside xbasic validation needs to be re-entered when you change the name of the field. You delete all existing code, save and re-open then put in code again. If you look closely you can change the code to reflect the new name but this is not your problem at present from what you describe.

[christappan]

Re: client-side validation

Thanks again Garry.

I'm just not seeing the same behavior you're suggesting you're seeing. I've attached a simple new dialog built like you've suggested. I'd love to know if it behaves differently for you.

[Garry Flanigan]

Re: client-side validation

See attached. Look at "Validation rules" - is this what you wanted?

[christappan]

Re: client-side validation

Thanks Garry.

I'm trying to avoid server callbacks which are occurring in the component you returned. I'm building for a low bandwidth environment so trying to and the validations you provided wouldn't work at all in an offline mode because they require a connection to a server.

Thanks for your help anyway, though.

[Garry Flanigan]

Re: client-side validation

ok, I see what you mean.
What about:

var ans1 = {dialog.object}.getValue('Q1');
var n = ans1.length;
if (n==0){
alert('q1 is required');
} else {
{dialog.object}.submit();
}

as code in dialog submit click event? If this is ok, just add in all the other conditions, but still have the other field validation to assist user when they click into field. Brute force can also disable submit until all conditions are met.
But what I suggested at least avoids a trip to the server, unless I am still seeing it wrong.

[GGandhi]

Re: client-side validation

take a look at this screencast:
http://screencast.com/t/yqdEqPemn0

while I used only to check empty fields you can do other validation as well.

[christappan]

Re: client-side validation

Appreciate your comments, Garry and Govindan. I guess I'm being whiny and stubborn--I'm just trying to find a way to:
1) Have the immediate validation fire when a user does enter bad data in the field and display beside the field;
2) On submit, fire for each field and errors display beside the field (just like immediate validation);
3) only have to write the validation rules in one place.

It just really seems like I could do something to fire off those validation checks at the field level even if the user doesn't touch them. I experimented with:

{dialog.Object}.setFocus('Q1');
{dialog.Object}.setFocus('Q2');
{dialog.Object}.setFocus('Q3');
{dialog.Object}.setFocus('Q4');

While that causes each field to run validation checks and responds with errors, you can't put it in the submit button code or the canSubmitDialog code because the submission goes through before those validation checks complete and would have prevented the submission.

I spent a little while this afternoon in Firebug trying to figure out what fires when the user touches the field and then the validation rules fire, but whether it's an onBlur event in the field or some kind of watch event elsewhere in the code, I can't find it. If I could, I think I call those functions from canSubmitDialog and catch the error prior to submitting the form.

I'm just convinced at this point that with all the need for client-side-only validation options on offline devices, the functionality shouldn't be so difficult...

Any other JS gurus out there with ideas?