Skip to main content
bumbies
bumbies
Known Participant
June 28, 2021
Answered

Adobe Animate CC HTML5 textinput component validation

  • June 28, 2021
  • 1 reply
  • 1015 views

Hi everyone, I am trying to create a question that requires the user to fill in several text boxes, then click a button to submit. If ALL boxes where entered correctly, then user can proceed to next question. Tried using the textinput component but having issues with the if/else codes to check if the user has entered correct entries. Any help would be much appreciated. Thank you in advance!

 

 

This topic has been closed for replies.
Correct answer kglad

I am still unable to achieve the validation.

Nothing happens when I click on the button.

Even empty fields should bring me to wrongTryAgain frame right? But nothing happens...

 

Here is what I did:

To make things really simple, I created a new file with 3 layers: Labels, Actions, Content

LAYER 1: I have named the 3 key frames with these labels: start, correctProceed, wrongTryAgain

LAYER 2: Action layer contains this code:

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

var root = this;

function validateF(){

if($("#answer1").val()=="123" && $("#answer2").val()=="234"){
// correct
root.gotoAndStop("correctProceed");
} else {
// incorrect
root.gotoAndStop("wrongTryAgain");
}
}

this.start.addEventListener("click", this.validateF);

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

LAYER 3: Content layer contains 2 TextInput components named "answer1" & "answer2" and a Start button named "start". The key frames of correctProceed & wrongTryAgain has Ok & Wrong static text.

 

Can you advice what I am doing/not doing correctly please? Thank you!


use:

 

this.start.addEventListener("click", validateF);

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
June 28, 2021

what code did you use to check?

bumbies
bumbiesAuthor
Known Participant
June 28, 2021

The code is like this:

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

if(!this.answer1_change_cbk && !this.answer2_change_cbk && !this.answer3_change_cbk) {

          function validate() {
                    if (root.answer1.text=="123" && root.answer2.text=="234" && root.answer3.text=="345") {     
                              root.gotoAndStop("correctProceed");
                    }
                    else {
                              root.gotoAndStop("wrongTryAgain");
                    }

          }

}

$("#dom_overlay_container").on("change", "#answer1", answer1_change.bind(this));

$("#dom_overlay_container").on("change", "#answer2", answer2_change.bind(this));

$("#dom_overlay_container").on("change", "#answer3", answer3_change.bind(this));
this.answer1_change_cbk = true;

this.answer2_change_cbk = true;

this.answer3_change_cbk = true;

this.AnswerButton.addEventListener("click", validate);    // button to click to check for all answers

}

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

Can I use an array?

     Like check an array of corresponding answers like this:

     var answers = [Correct1, Correct2, Correct3];

     if (answers == true) ...

 

It's all very messy at this point.

The logic seems there but don't know if what I am doing is correct.

Hope you get what I am trying to do. 

Appreciate your input! Thank you!

kglad
Community Expert
kgladCommunity Expert
Community Expert
June 28, 2021

when you want to validate the input, call validateF().  no other code is need except your goto's

 

function validateF(){

if($("#answer1").val()=="123" && $("#answer2").val()=="234"&&$("#answer3").val()=="345"){

// correct

} else {

// incorrect

}

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices