[SOLVED] Validate TextInput

How-to Discussions
1

I was looking for a solution to validate my email TextInput field and some guys at #slack helped me, so I’m just sharing with the community how I solved this problem.

To whom are interested in, here is my code to validate a <TextInput> email field:

<TextInput ux:Class="EmailInput" Value="{Property Text}" InputHint="{Property HintType}" PlaceholderText="e-mail" Margin="15" TextColor="{Property ValidationColor}" ValidationColor="#000" PlaceholderColor="#44444450">
    <string ux:Property="Text" />
    <Fuse.Controls.TextInputHint ux:Property="HintType" />
    <bool ux:Property="IsValid" />
    <float4 ux:Property="ValidationColor" />

    <WhileNotFocused>
      <JavaScript>
          // Simple validation just for this example
          console.log( "Text: " + this.Text.value );
          this.IsValid.value = false;

          var text = this.Text.value;

           if(text && text.length > 3 && text.indexOf('@') != -1 && text.indexOf('.') != -1) {
               this.IsValid.value = true;
           } else {
               this.IsValid.value = false;
           }
      </JavaScript>
      <WhileFalse Value="{Property IsValid}">
          <Change this.ValidationColor="#ff3300"/>
      </WhileFalse>
      <WhileTrue Value="{Property IsValid}">
          <Change this.ValidationColor="#000"/>
      </WhileTrue>

    </WhileNotFocused>

</TextInput>
2

Nice!

3

Thanks a lot!

4

This awesome ! However, I have tiny question the Text and IsValid variables are actually properties defined outside the javascript right ?

5

@GFlakes: they most certainly appear to be that, yes. We have documentation for ux:Property that should have you covered.

6

Also, the code formatting in the original post was broken. I fixed it, so it now shows the whole thing.

7

Many thanks. Now it is clear though