JSFiddle - React, Tailwind, and code Playground
HTML
<input type="email" id="reg_email"></input>
<input type="email"id="reg_email2"></input>
<div class="field_confirm"></div>
<div class="field_confirm"></div>
<div class="field_confirm"></div>
<div class="field_confirm"></div>
JavaScript
function GOPRO_pfFieldConfirmation(oField1, oField2, oMarkerField, bCaseSens) {
var $field1 = $(oField1), $field2 = $(oField2);
$(oField1).focus(function() {
//put these in the focus event, so they are bound everytime.
var GOPRO_iFieldLen1 = $field1.val().length;
var GOPRO_iFieldLen2 = $field2.val().length;
var GOPRO_sFieldVal1 = $field1.val();
var GOPRO_sFieldVal2 = $field2.val();
var GOPRO_sFieldSub = GOPRO_sFieldVal1.substring(0, GOPRO_iFieldLen2);
//if not case sensitive, make all upper case
if (bCaseSens == false) {
GOPRO_sFieldVal1 = GOPRO_sFieldVal1.toUpperCase();
GOPRO_sFieldVal2 = GOPRO_sFieldVal2.toUpperCase();
GOPRO_sFieldSub = GOPRO_sFieldSub.toUpperCase();
}
console.log(GOPRO_iFieldLen1);
if ((GOPRO_sFieldVal1 == GOPRO_sFieldVal2) && GOPRO_iFieldLen1 > 0) {
//GreenMarker();
} else if (GOPRO_iFieldLen1 > 0 && GOPRO_iFieldLen2 > 0) {
//RedMarker();
} else {
//NoMarker();
}
});
}
GOPRO_pfFieldConfirmation('#reg_email', '#reg_email2', '.field_confirm:eq(3)', false);