I have to click twice on a jquery button to submit a registeration form

Question

I have this page that hides the submit button if the passwords do not match. If they match the button appears but it needs to be clicked twice to submit the form.

html page

        <form action="registeration.php"  method="post">
          <input style="font-size:15px; text-align: right" type="tel" pattern="[\d\u0660-\u0669]+" placeholder="رقم الجوال ويفضل أن يكون مربوط بالواتس آب" name="Phone" required oninvalid="this.setCustomValidity('ضع رقم هاتف جوال هنا!')" onchange="this.setCustomValidity('')" oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')" minlength="10" maxlength="10">
          <input style="font-size:20px; text-align: right" type="text" placeholder="الأسم أو الكنية أو أسم المكتب" maxlength="24" name="User" required oninvalid="this.setCustomValidity('الأسم أو الكنية أو أسم المكتب')" onchange="this.setCustomValidity('')">
          <input style="font-size:20px; text-align: right" type="password" placeholder="كلمة المرور" id="txtNewPassword" maxlength="24" name="Password" required oninvalid="this.setCustomValidity('أدخل الرقم السري هنا')" onchange="this.setCustomValidity('')">
          <input style="font-size:20px; text-align: right" type="password" placeholder="قم بإعادة كتابة كلمة المرور" id="txtConfirmPassword" maxlength="25" onChange="checkPasswordMatch();" name="Repassword" required oninvalid="this.setCustomValidity('أعد إدخال الرقم السري هنا')" onchange="this.setCustomValidity('')">
          <div class="registrationFormAlert" id="divCheckPasswordMatch"> </div>
        </form> 

jquery

function checkPasswordMatch() {
    var Password = $("#txtNewPassword").val();
    var Repassword = $("#txtConfirmPassword").val();

    if (Password != Repassword)
        $("#divCheckPasswordMatch").html('<div style="text-align: right" class="alert alert-danger" role="alert"> !<b>خطأ:</b> الرقم السري غير متطابق </div>');
    else
        $("#divCheckPasswordMatch").html('<button type="submit" class="btn btn-primary btn-block btn-large">قم بإنشاء الحساب</button>');
}

$(document).ready(function () {
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

Edit added snippet

 function checkPasswordMatch() { var Password = $("#txtNewPassword").val(); var Repassword = $("#txtConfirmPassword").val(); if (Password != Repassword) $("#divCheckPasswordMatch").html('<div style="text-align: right" class="alert alert-danger" role="alert"> !<b>خطأ:</b> الرقم السري غير متطابق </div>'); else $("#divCheckPasswordMatch").html('<button type="submit" class="btn btn-primary btn-block btn-large">قم بإنشاء الحساب</button>'); } $(document).ready(function() { $("#txtConfirmPassword").keyup(checkPasswordMatch); }); // for testing, don't want to actually submit $("form").on("submit", function() { console.log("submit"); return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="registeration.php" method="post"> <input style="font-size:15px; text-align: right" type="tel" pattern="[\\d\٠-\٩]+" placeholder="رقم الجوال ويفضل أن يكون مربوط بالواتس آب" name="Phone" required oninvalid="this.setCustomValidity('ضع رقم هاتف جوال هنا!')" onchange="this.setCustomValidity('')" oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')" minlength="10" maxlength="10"> <input style="font-size:20px; text-align: right" type="text" placeholder="الأسم أو الكنية أو أسم المكتب" maxlength="24" name="User" required oninvalid="this.setCustomValidity('الأسم أو الكنية أو أسم المكتب')" onchange="this.setCustomValidity('')"> <input style="font-size:20px; text-align: right" type="password" placeholder="كلمة المرور" id="txtNewPassword" maxlength="24" name="Password" required oninvalid="this.setCustomValidity('أدخل الرقم السري هنا')" onchange="this.setCustomValidity('')"> <input style="font-size:20px; text-align: right" type="password" placeholder="قم بإعادة كتابة كلمة المرور" id="txtConfirmPassword" maxlength="25" onChange="checkPasswordMatch();" name="Repassword" required oninvalid="this.setCustomValidity('أعد إدخال الرقم السري هنا')" onchange="this.setCustomValidity('')"> <div class="registrationFormAlert" id="divCheckPasswordMatch"> </div> </form>

Answer 1

The issue is not that you have to click it twice, it's that it's being recreated when you click it, so you're not actually clicking it the first time.

You have both

onChange="checkPasswordMatch();" 

and

$("#txtConfirmPassword").keyup(checkPasswordMatch);

so when you type the same 2nd password, the button appears, you then immediately "click" on that button, but, as you mouse-down to click the onChange fires, deletes your button and creates a new one, which won't register your "click" as it didn't get a mouse-down.

You can confirm this: type the same 2nd password, then click outside the 2nd input (but not on the button) then click the button and it works ok.

Alternatively, remove the extra onchange= and use either antiquated onXX= or jquery event handlers, don't mix and match them.

Updated snippet:

 function checkPasswordMatch() { var Password = $("#txtNewPassword").val(); var Repassword = $("#txtConfirmPassword").val(); if (Password != Repassword) $("#divCheckPasswordMatch").html('<div style="text-align: right" class="alert alert-danger" role="alert"> !<b>خطأ:</b> الرقم السري غير متطابق </div>'); else $("#divCheckPasswordMatch").html('<button type="submit" class="btn btn-primary btn-block btn-large">قم بإنشاء الحساب</button>'); } $(document).ready(function() { $("#txtConfirmPassword").keyup(checkPasswordMatch); }); // for testing, don't want to actually submit $("form").on("submit", function() { console.log("submit"); return false; });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="registeration.php" method="post"> <input style="font-size:15px; text-align: right" type="tel" pattern="[\\d\٠-\٩]+" placeholder="رقم الجوال ويفضل أن يكون مربوط بالواتس آب" name="Phone" required oninvalid="this.setCustomValidity('ضع رقم هاتف جوال هنا!')" onchange="this.setCustomValidity('')" oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')" minlength="10" maxlength="10"> <input style="font-size:20px; text-align: right" type="text" placeholder="الأسم أو الكنية أو أسم المكتب" maxlength="24" name="User" required oninvalid="this.setCustomValidity('الأسم أو الكنية أو أسم المكتب')" onchange="this.setCustomValidity('')"> <input style="font-size:20px; text-align: right" type="password" placeholder="كلمة المرور" id="txtNewPassword" maxlength="24" name="Password" required oninvalid="this.setCustomValidity('أدخل الرقم السري هنا')" onchange="this.setCustomValidity('')"> <input style="font-size:20px; text-align: right" type="password" placeholder="قم بإعادة كتابة كلمة المرور" id="txtConfirmPassword" maxlength="25" xx_onChange="checkPasswordMatch();" name="Repassword" required oninvalid="this.setCustomValidity('أعد إدخال الرقم السري هنا')" onchange="this.setCustomValidity('')"> <div class="registrationFormAlert" id="divCheckPasswordMatch"> </div> </form>

Answer 2

Why not just show and hide it?

 function checkPasswordMatch() { var Password = $("#txtNewPassword").val(); var Repassword = $("#txtConfirmPassword").val(); return Password === Repassword; } $(function() { $("form").on("change", function() { const ok = checkPasswordMatch(); $("[type=submit]").toggle(ok) $(".alert").toggle(!ok) }); });

 .hide { display: none }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action="registeration.php" method="post"> <input style="font-size:15px; text-align: right" type="tel" pattern="[\\d\٠-\٩]+" placeholder="رقم الجوال ويفضل أن يكون مربوط بالواتس آب" name="Phone" required oninvalid="this.setCustomValidity('ضع رقم هاتف جوال هنا!')" onchange="this.setCustomValidity('')" oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')" minlength="10" maxlength="10"> <input style="font-size:20px; text-align: right" type="text" placeholder="الأسم أو الكنية أو أسم المكتب" maxlength="24" name="User" required oninvalid="this.setCustomValidity('الأسم أو الكنية أو أسم المكتب')" onchange="this.setCustomValidity('')"> <input style="font-size:20px; text-align: right" type="password" placeholder="كلمة المرور" id="txtNewPassword" maxlength="24" name="Password" required oninvalid="this.setCustomValidity('أدخل الرقم السري هنا')" onchange="this.setCustomValidity('')"> <input style="font-size:20px; text-align: right" type="password" placeholder="قم بإعادة كتابة كلمة المرور" id="txtConfirmPassword" maxlength="25" name="Repassword" required oninvalid="this.setCustomValidity('أعد إدخال الرقم السري هنا')" onchange="this.setCustomValidity('')"> <div class="registrationFormAlert" id="divCheckPasswordMatch"> </div> <div style="text-align: right" class="hide alert alert-danger" role="alert"> !<b>خطأ:</b> الرقم السري غير متطابق </div> <button type="submit" class="hide btn btn-primary btn-block btn-large">قم بإنشاء الحساب</button> </form>