How to make sure two text inputs are matching

Ask the community
,
1

Hello,

I am new to coding and I have been trying to figure this out all day.

I am trying to have two text inputs match as a way to confirm that the user has submitted a matching email.

if the two text input are not matching, the button is disabled and an error shows on the inputs saying “the emails dont match”

I hope you understand what I mean, I have included my code and the image here below.

Please send help,
Nooh

$w.onReady( function () {

let mail1 = $w( “#input11” ).value;
let mail2 = $w( “#input15” ).value;

if (!mail2 === mail1){
$w( ‘#button1’ ).disable()
}
else {
$w( ‘#button1’ ).enable()
}
}
);

454×511 62.8 KB

2

Putting your code in the onReady() function means that it will only run one time - when the page is ready. I assume that your intention is the check the two values each time the fields are entered or modified. So, you want something like this:

$w.onReady(function () { 
   $w(“#input11").onInput( (event) => {
      checkInputValues();
   } );
   
   $w(“#input15").onInput( (event) => {
      checkInputValues()
   } );
});

function checkInputValues()  {
   let mail1 = $w("#input11").value;
   let mail2 = $w("#input15").value;
   if(mail2 === mail1) {
      $w('#button1').enable();
   }
   else {
      $w('#button1').disable();
   }
}

The above code will compare the values of the two input fields as the user types in each field. #button1 will be enabled when both fields are identical.

3

Thank you Yisrael,

I tried the code and it worked, but if you click twice on the code It will just go to the next page. Is that a limit that wix has?

thank you again for your help, I really appreciate it !

4

Glad it worked.

I don’t know what you mean by “click twice on the code”. What are you doing? What happens? Let me know and I’ll try my best to help.

5

oh sorry for the confusion, what I was trying to say was if the two emails are not matching, and I click on the button twice, the button goes to the next page (as if there were no conditions).

Is it possible to use the “required“ function to make sure the button won’t take me to the next page unless the two emails match?

Thank you again!

6

@bateef The required property is used to determine if an input element is required to have a value.

How is the button working? If the button is disabled, then nothing should happen when clicking.

See the article Corvid: About Validating User Input with Code for details on how to handle field validation.

7

@Yisrael thank you for explaining the required property.

the button works if I click on it a couple of times, even if the two emails don’t match. Im not sure how or why exactly the button does not remain disabled for the entirety of the time.

8

@bateef OK, so something must be going on. I’ll take a peek. Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

9

@Yisrael okay I am not sure how to post the editor URL of my site

https://editor.wix.com/html/editor/web/renderer/edit/9041d559-2c26-4cdf-95fe-5c45df017416?metaSiteId=95ff8373-0b67-4e6d-b51e-f9e1d5a68b44&editorSessionId=5ab30fc2-efae-469b-a90f-117f707138df&referralInfo=my+sites

will this work? The page is called AC Brave.

Thank you again!

10

@yisrael-wix okay I am not sure how to post the editor URL of my site

https://editor.wix.com/html/editor/web/renderer/edit/9041d559-2c26-4cdf-95fe-5c45df017416?metaSiteId=95ff8373-0b67-4e6d-b51e-f9e1d5a68b44&editorSessionId=5ab30fc2-efae-469b-a90f-117f707138df&referralInfo=my+sites

will this work? The page is called AC Brave.

Thank you again!

11

The page has many errors, because the checkInputValues() function should not be inside of the button1_click() function.