Adobe Animate CC HTML5 textinput component validation

[bumbies]

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!

[kglad]

what code did you use to check?

[bumbies]

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]

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

}

}

[bumbies]

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!

[kglad · Accepted solution]

use:

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

[bumbies]

Ahh with that one line you have made my life a little less stressful.

It works now. Thank you so much!

[kglad]

you're welcome.

[bumbies]

Hi kglad, can I check if you can help me figure this out.

I am trying to validate multiple buttons & textinput boxes with button.

Post is here.

Hope to hear from you soon. Thank you!