Skip to main content
bumbies
bumbies
Known Participant
Jun 28, 2021 12:06 PM UTC
Answered

Adobe Animate CC HTML5 textinput component validation

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 is closed to new replies. Start a new post to keep the conversation going.
kglad
kgladCorrect answer
Community Expert
Jun 29, 2021 1:04 PM UTC

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);

View reply

8 replies

kglad
Community Expert
kgladCommunity Expert
Community Expert
Jun 28, 2021 1:21 PM UTC

what code did you use to check?

Translate
bumbies
bumbiesAuthor
Known Participant
Jun 28, 2021 2:57 PM UTC

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!

Translate
kglad
Community Expert
kgladCommunity Expert
Community Expert
Jun 28, 2021 4:50 PM UTC

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

}

}

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