Re: [flexcoders] Re: BETA 2: How to validate a form before actually submitting

Mon, 03 Apr 2006 16:04:35 -0700

Hi Alexander,

Thanks to your observation I've came to a better solution:

<mx:Script>
    <![CDATA[   
import mx.events.ValidationResultEvent;

private function checkValidators() : Boolean
{
stringvalidation  = stringvalidator.validate().type;
stringvalidation2 = stringvalidator2.validate().type;
if ( (stringvalidator == ValidationResultEvent.VALID) && (stringvalidator2 == ValidationResultEvent.VALID) ) {
return true;
} else {
return false;
}
}

private function sendForm() : void
{
if(checkValidators()) {
//do whatever you have to do to send the form
} else {
alert.show("Form is not valid!","Alert");
}
}
private var stringvalidation : ValidationResultEvent;
private var stringvalidation2 : ValidationResultEvent;
]]>
</mx:Script>

<mx:StringValidator id="stringvalidator" source="{inputText}" property="text" minLength="3" maxLength="20"
 trigger="{inputText}" triggerEvent="change"/>

<mx:StringValidator id="stringvalidator2" source="{inputText}" property="text" minLength="3" maxLength="20"
 trigger="{inputText2}" triggerEvent="change"/>

<mx:Form>
<mx:FormItem label="Input some text" required="true" direction="horizontal" fontWeight="bold" textAlign="left">
<mx:TextInput id="inputText" width="80" maxChars="20"/>
 </mx:FormItem>
<mx:FormItem label="Input some other text" required="true" direction="horizontal" fontWeight="bold" textAlign="left">
<mx:TextInput id="inputText2" width="80" maxChars="20"/>
 </mx:FormItem>
</mx:Form>
<mx:Button id="fromButton" label="Send form" click="sendForm()"/>


Some explanation and changes:

- Removed the valid/invalid properties of the validators.
- Added an id for each one.
- Instead of doing this: if ( (stringvalidator.validate ().type== ValidationResultEvent.VALID) && (stringvalidator2.validate().type== ValidationResultEvent.VALID) ) which is also correct, I think it's better to do it with the variables, and then evaluating them, because you validate all the fields (and the tooltip errors are shown, like you wanted Alexander), the other way if the first fails the other fields won't be validated.

Hope this helps,

Oriol

2006/4/3, Alexander Tsoukias <[EMAIL PROTECTED] >:
While this does the trick, what if I have 3 inputs? While one passes the validation the sendForm() will be executed while the other 2 inputs are still unvalidated? I want to make sure all of them are validated before executing sendForm().
 
BTW, cool about the on change validation. One thing though... is there a way to make the error tooltip show up programatically instead of having to hover over my mouse pointer?
 
Thanks,
Alexander


Oriol Gual < [EMAIL PROTECTED]> wrote:
Hi,

What I do to validate a form, is somethig like this:

<mx:Script>
    <![CDATA[   

private function handleValid(eventObj:ValidationResultEvent) : void
        {
            if(eventObj.type==ValidationResultEvent.VALID ) {
                formValid = true;
            } else {
                formValid = false;
            }      
        }   
private function sendForm() : void
{
if(formValid) {
//do whatever you have to do to send the form
} else {
alert.show("Form is not valid!","Alert");
}
}

private var formValid : Boolean = false;

]]>
</mx:Script>

<mx:StringValidator source="{inputText}" property="text" minLength="3" maxLength="20"
 trigger="{inputText}" triggerEvent="change" valid="handleValid(event)" invalid="handleValid(event)"/>

<mx:Form>
<mx:FormItem label="Input some text" required="true" direction="horizontal" fontWeight="bold" textAlign="left">
<mx:TextInput id="inputText" width="80" maxChars="20"/>
 </mx:FormItem>
</mx:Form>
<mx:Button id="fromButton" label="Send form" click="sendForm()"/>
 
When the user inputs some text in the textinput the validation occurs automatically ( trigger="{inputText}" triggerEvent="change") and the function handleValid is called. Then, when clicking the button if the variable formValid it's true we can send the form.

By the way, I have a question, what is the meaning of the models with flex 2 and forms? Because they're declared in the examples but the validators don't use them.

Hope this helps,

Oriol


2006/4/2, Dreamer < [EMAIL PROTECTED]>:
Alex & Alex,

                 you can put the data be validated in a model.like this:
                        <mx:Model id="order">
                                <email>{ email.text }</email>//email is a textInput controller's id
                        </mx:Model>
        then define a validator:

   <mx:EmailValidator field="order.email"/>

then write a function in the script tag:

  function confirmOrder(): Void {

        if (mx.validators.Validator.isStructureValid(this, 'order')) {
                mx.controls.Alert.show("Success!!");
                addMember();
          }
    else {
                mx.controls.Alert.show("Please enter valid data in the fields with errors and try again.", "Problem");
            }

}


Peace,

Dreamer  in china
[EMAIL PROTECTED]
2006-04-02

======= 2006-04-02 01:37:17 £º=======

>Hi Mike,
>
>I understand the login, but how do I reference the validation?
>
>I mean what would actually go where you have "validation is success".
>
>I'm not an actionscrip expert! I'm a cfforever guy ;-).
>
>Alexander
>
>
>--- In flexcoders@yahoogroups.com, "Dreamer" <[EMAIL PROTECTED]> wrote:
>>
>> Alex & Alex,
>>
>>      you can write a function,like that.
>>
>>      if(validation is success)
>>              addMember();
>>      else
>>              alert("invalid input!!!");
>>
>>
>>  Peace,
>>
>> Dreamer
>> [EMAIL PROTECTED]
>> 2006-04-01
>>
>> ======= 2006-04-01 18:32:22 £º=======

>>
>> >
>> >Hello,
>> >
>> >In a signup form, when I click the submit button I would like for
>all
>> >the validation to happen and then actually hit the addMember()
>> >function.
>> >
>> >But if a form fails the validation how can I prevent the
>execution of
>> >addMember().
>> >
>> >Thanks,
>> >Alexander
>> >
>> >
>> >
>> >
>> >
>> >--
>> >Flexcoders Mailing List
>> >FAQ:
> http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
>> >Search Archives: http://www.mail-archive.com/flexcoders%
>40yahoogroups.com
>> >Yahoo! Groups Links
>> >
>> >
>> >
>> >
>> >
>> >
>> >
>>
>> = = = = = = = = = = = = = = = = = = = =
>>
>>
>>
>>
>
>
>
>
>
>
>--
>Flexcoders Mailing List
>FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
>Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
>Yahoo! Groups Links
>
>
>
>

= = = = = = = = = = = = = = = = = = = =






--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
Yahoo! Groups Links

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/flexcoders/

<*> To unsubscribe from this group, send an email to:
    [EMAIL PROTECTED]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/



YAHOO! GROUPS LINKS






--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com


YAHOO! GROUPS LINKS





--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com


YAHOO! GROUPS LINKS



Reply via email to