我必须在 jquery 按钮上单击两次才能提交注册表

时间：2021-02-20 16:37:32

标签： javascript html jquery

如果密码不匹配，我有这个页面会隐藏提交按钮。如果匹配，则显示按钮，但需要单击两次才能提交表单。

html 页面

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

编辑添加的片段

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\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>

2 个答案:

答案 0 :(得分：2)

问题不在于你必须点击它两次，而是当你点击它时它会被重新创建，所以你实际上并不是第一次点击它。

两者都有

onChange="checkPasswordMatch();"

和

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

因此，当您输入相同的第二个密码时，会出现该按钮，然后您会立即“单击”该按钮，但是，当您向下单击 onChange 时，会触发、删除您的按钮并创建一个新的一个，它不会注册您的“点击”，因为它没有按下鼠标。

您可以确认这一点：输入相同的第二个密码，然后在第二个输入之外点击（但不是在按钮上），然后点击按钮，它工作正常。

或者，删除额外的 onchange= 并使用过时的 onXX= 或 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);
});

// 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\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" 
         xx_onChange="checkPasswordMatch();" 
         name="Repassword" 
         required 
         oninvalid="this.setCustomValidity('أعد إدخال الرقم السري هنا')"
         onchange="this.setCustomValidity('')">
  <div class="registrationFormAlert" id="divCheckPasswordMatch"> </div>
</form>

答案 1 :(得分：1)

为什么不直接显示和隐藏它？

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\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"  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>

相关问题
最新问题