7 Replies Latest reply on Aug 30, 2009 7:47 AM by 435.mahesh

    problem in form validation?

    435.mahesh

      Hi

      Here i have  attatched source code.In this form i submitted all the the data and i clicked on

      submit button.After click on the button form is successfully validated,but u will will get textinput

      fields boxes are in red color.But my requirement is after click on submit button,i want to clear

      form data and dont display that red color textinput boxes.How to achieve this?

       

       

       

       

      Regards

      D.Mahesh Babu

        • 1. Re: problem in form validation?
          Andrew Rosewarn

          Hi Mahesh

           

          I changed some code around while I was testing so it may look a little different but it works.. Heres the code and below the key changes I made.

           

          <?xml version="1.0" encoding="utf-8"?>

           

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

          layout="vertical"

              verticalAlign="middle"

              backgroundColor="white"

              >

           

              <mx:Script>

                  <![CDATA[

                      import mx.validators.Validator;

                      import mx.events.ValidationResultEvent;

                      import mx.controls.Alert;

           

                      private function validateForm(evt:MouseEvent):void {

          // Called it here and turned on when you wanna validate.

          enableValidators(true);

          var validatorErrorArray:Array = Validator.validateAll(validatorArr);

          var isValidForm:Boolean = validatorErrorArray.length == 0;

           

                          if (isValidForm) {               

          Alert.show("The form is valid!", "Valid form...");

          resetForm();

          } else {

          var err:ValidationResultEvent;

          var errorMessageArray:Array = [];

           

                              for each (err in validatorErrorArray) {

          var errField:String = FormItem(err.currentTarget.source.parent).label

          errorMessageArray.push(errField + ": " + err.message);

                              }

           

                              Alert.show(errorMessageArray.join("\n"), "Invalid form...", Alert.OK);

                          }

                      }

           

                      private function resetForm(evt:MouseEvent = null):void {

                          // Turned it off to reset the form.

                          enableValidators(false);

                          shippingName.text = "";

                          shippingAddress1.text = "";

          shippingAddress2.text = "";

          shippingCity.text = "";

                          shippingState.selectedIndex = -1;

                      }

           

          // i've added this to enable and disable validation.          

                      private function enableValidators(enabled:Boolean):void {

                      for each (var validator:Validator in validatorArr) {

                          validator.enabled = enabled;

                          }

                      }

           

                  ]]>

           

              </mx:Script>

           

          <mx:XMLList id="statesXMLList">

               <state label="California" data="CA" />

          <state label="Oregon" data="OR" />

          </mx:XMLList>

           

          <mx:Array id="validatorArr">

          <mx:StringValidator id="shippingName_stringValidator"

          source="{shippingName}"

                  property="text"

                  minLength="2"

                  trigger="{submitButton}"

          triggerEvent="click" />

           

          <mx:StringValidator id="shippingAddress1_stringValidator"

          source="{shippingAddress1}"

                  property="text"

          trigger="{submitButton}"

          triggerEvent="click"

                  minLength="2" />

           

              <mx:StringValidator id="shippingCity_stringValidator"

                  source="{shippingCity}"

                  property="text"

                  minLength="2"

                  trigger="{submitButton}"

          triggerEvent="click" />

           

          <mx:NumberValidator id="shippingState_numberValidator"

          source="{shippingState}"

                  lowerThanMinError="This field is required."

          property="selectedIndex"

          minValue="0"

                 trigger="{submitButton}"

          triggerEvent="click"/>

          </mx:Array>

           

          <mx:Form>

          <mx:FormHeading label="Shipping Information" />

          <mx:FormItem required="true" label="Name">

          <mx:TextInput id="shippingName" maxChars="96" />

          </mx:FormItem>

          <mx:FormItem required="true" label="Address">

          <mx:TextInput id="shippingAddress1" maxChars="128" />

          </mx:FormItem>

          <mx:FormItem label="">

          <mx:TextInput id="shippingAddress2" maxChars="128" />

          </mx:FormItem>

          <mx:FormItem required="true" label="City">

          <mx:TextInput id="shippingCity" maxChars="128" />

          </mx:FormItem>

          <mx:FormItem required="true" label="State">

          <mx:ComboBox id="shippingState" prompt="Please select a State..." selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" />

          </mx:FormItem>

          <mx:FormItem>

          <mx:HBox>

          <mx:Button label="Submit" click="validateForm(event)"  id="submitButton"/>

          <mx:Button label="Reset" click="resetForm(event)" />

          </mx:HBox>

          </mx:FormItem>

              </mx:Form>

          </mx:Application>

           

          I added trigger event and trigger properties to your form so its only validated when the submit button is pressed.

          I added the enableValidators function, turning on when you are about to validate, and turning off when you reset the form.  (when you were setting all of you textfields etc back to "" it was validating and thats why they fields were displaying red.

          I also move your reset fields into a function so you don;t have to do all that textfield = "" code twice.

           

          I hope this helps, if so credit it with a mark.

           

          Regards

           

          Andrew

          • 2. Re: problem in form validation?
            435.mahesh Level 1

            thanq Roasen

            Here i have attatched code(one application and two components)

            application name---Main1.mxml

            component names--Test.mxml,Test2.maml

            Here i thnk i have written correctly.But functionality is not working.

            Here u will will find two linkbuttons those are A add ADD.

            My requirement is wen u clicked on Athen A will be added to applicationContribar.Similarly ADD also

            But it is not working.Plz see the code and hope i will get reply

            • 3. Re: problem in form validation?
              Andrew Rosewarn Level 3

              Can you try that attachment again or put it all into a text file I don;t seem to be able to download it its just appearing as text.

              • 4. Re: problem in form validation?
                435.mahesh Level 1

                It is under queue process.Again i attatced one taxt file.It will contains Total

                three components code.Just chk

                 

                 

                 

                 

                Regards

                D.Mahesh babu

                • 5. Re: problem in form validation?
                  435.mahesh Level 1

                  This is total code(one application,two components)

                  -----------------------------------------------------

                  Main1.mxml
                  -------------------
                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*" width="1064" height="600">
                      <mx:Style source="/css/skinPreview.css"/>
                      <!--<components:BreadCrumbComponent x="0" width="1064" y="0" height="600"/>-->
                      <components:Test />
                  </mx:Application>



                  Test.mxml
                  --------------------
                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="880" height="484" xmlns:components="components.*">
                     
                  <mx:ApplicationControlBar id="cBar" width="763" height="42">
                     <mx:Button styleName="breadCrumbButton" label="settings"/>
                     <mx:Button styleName="breadCrumbButton" label="settings1"/>
                  </mx:ApplicationControlBar>
                  <components:Test2  width="674" height="360" y="86" x="40"/>

                  </mx:Canvas>



                  Test2.mxml
                  -------------------------------
                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="714" height="380">
                      <mx:Script>
                     <![CDATA[
                       import mx.controls.LinkButton;
                       import mx.controls.Button;
                       var linkButton:Button;
                       var linkButton1:Button;
                       var var_test:Test=new Test();
                  private function addBar():void {
                        linkButton=new Button();
                  linkButton.label = 'A';
                  var_test.cBar.addChild(linkButton);
                  var_test.cBar.removeChild(linkButton1);
                  }
                  public function addBar1():void
                  {
                       var_test.cBar.removeChild(linkButton);
                       linkButton1=new Button();
                       linkButton1.label="Add";    
                       var_test.cBar.addChild(linkButton1);
                  }
                  ]]>
                  </mx:Script>
                      <mx:LinkButton color="red" label="Add" x="184" y="319" click="addBar1()"/>
                      <mx:LinkButton color="red" x="343" y="217" label="A" click="addBar()"/>
                  </mx:Canvas>

                   

                  • 6. Re: problem in form validation?
                    Andrew Rosewarn Level 3

                    Not sure if I'm understanding your question here but I think your saying your test2 component should have the link button and when click the new button should bet added to the test comp.

                     

                    So if thats the case.

                     

                    Test 2 should look like this

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="714" height="380" >

                        <mx:Script>

                       <![CDATA[

                      

                    private function addBar():void {

                          dispatchEvent(new Event('addButton'));

                    }

                     

                    ]]>

                    </mx:Script>

                     

                    <mx:Metadata>

                    [Event(name="addButton", type="flash.events.Event")]

                    </mx:Metadata>

                     

                        <mx:LinkButton color="red" x="147" y="261" label="Another" click="addBar()"/>

                    </mx:Canvas> color="red" x="147" y="261" label="Another" click="addBar()"/>

                    </mx:Canvas>

                     

                    It detects the click event and dispatches an event.  The meta tag is so mxml can be used to declare a responder in the test comp.

                     

                    Test Comp like this

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="880" height="484" xmlns:components="components.*" xmlns:ns1="*">

                       <mx:Script>

                       <![CDATA[

                       import mx.controls.Button;

                       private function addButtonHere():void {

                       var linkButton:Button =new Button();

                      linkButton.label = 'A';

                      cBar.addChild(linkButton);

                       }

                       ]]>

                       </mx:Script>

                    <mx:ApplicationControlBar id="cBar" width="763" height="42">

                       <mx:Button styleName="breadCrumbButton" label="settings"/>

                       <mx:Button styleName="breadCrumbButton" label="settings1"/>

                    </mx:ApplicationControlBar>

                    <ns1:test2 x="49" y="64" addButton="addButtonHere()">

                    </ns1:test2>

                    </mx:Canvas>

                    Now you can see the adButton event is listened for in the test2 comp tag, and then in test itself is the handler for this which declares and instansiates the new button and puts it in the ApplicationControlBAr (cbar)
                    Hopefully thats what you meant, if you give it mark, thanks
                    Andrew

                    • 7. Re: problem in form validation?
                      435.mahesh Level 1

                      Thaq.Its working fine.I have one moe doubt

                      i have one application and two components

                      RolesDatagrid.mxml

                      ----------------------------------

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="444" height="148">
                        <mx:Script>
                            <![CDATA[
                                import mx.core.IFlexDisplayObject;
                                import mx.managers.PopUpManager;
                                //import components.RolesTitleWindow;
                                public function fnAddRoles():void
                                {
                                    var var_role_title_window:RolesTitleWindow=RolesTitleWindow(PopUpManager.createPopUp(this,Rol esTitleWindow,true));                
                                      PopUpManager.centerPopUp(var_role_title_window);
                                }
                            ]]>
                        </mx:Script>
                          <mx:DataGrid x="0" y="0" width="301" height="94">
                              <mx:columns>
                                  <mx:DataGridColumn headerText="RoleName"     dataField="col1"/>
                                  <mx:DataGridColumn headerText="EmployeeName" dataField="col2"/>
                                  <mx:DataGridColumn headerText="Action"       dataField="col3"/>
                              </mx:columns>
                          </mx:DataGrid>
                          <mx:Button x="316" y="72" label="AddRoles" click="fnAddRoles()" styleName="buttonNoOfficial" width="95" height="22"/>
                         
                      </mx:Canvas>

                       

                      RolesTitleWindow.mxml

                      --------------------------------------

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="250">
                        <mx:Script>
                            <![CDATA[
                                public function fnDivisionRoleName():void
                                {
                                   
                                }
                            ]]>
                        </mx:Script>
                          <mx:ArrayCollection id="id_array1">
                              <mx:String>mahesh</mx:String>
                              <mx:String>suresh</mx:String>
                              <mx:String>babu</mx:String>
                          </mx:ArrayCollection>
                          <mx:ArrayCollection id="id_array2">
                              <mx:String>Pm</mx:String>
                              <mx:String>Tm</mx:String>
                              <mx:String>ssl</mx:String>
                          </mx:ArrayCollection>
                          <mx:ComboBox id="id_dividion_role_name" x="48" y="77" width="92" dataProvider="{id_array2}"></mx:ComboBox>
                          <mx:ComboBox x="168.5" y="77" width="92" dataProvider="{id_array1}"></mx:ComboBox>
                         
                          <mx:Button x="94" y="127" label="Add"  click="fnDivisionRoleName();"/>
                          <mx:Button x="168.5" y="127" label="Cancel"/>
                           
                      </mx:TitleWindow>

                      App.mxml(application)

                      -----------------------------------

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">
                          <local:RolesDatagrid />
                      </mx:Application>

                       

                       

                      This is the code.When ren the application u will get datagrid and addRoles button.wen u click on

                      the addRoles button u will get title window.It contains two comboboxes and add button.My

                      requirement is select values from two comboboxes and click on add button,then the selected combox

                      data will be added to datagrid firstrow(It will contains three fields those are rolename,employeename,action).

                      For example if u select comboboxes items are pm,mahesh then i want the datagrid items are

                      rolename      employeename     action

                      ------------      ------------------------     ----------------

                      pm              mahesh             Edit,delte buttons

                       

                       

                       

                       

                       

                      Regards

                      D.Mahesh Babu