Javascript 函数仅适用于我模态内的第一行

Question

我正在使用 javascript 函数进行输入验证，它在模态中使用。我单击第一行的编辑按钮，javascript 功能运行良好。但是当我点击第二行和后续行的编辑按钮时，它不起作用。

我不太确定问题出在模态内的数据还是模态外的数据

我尝试在输入字段中添加一个 class 名称，并将 javascript 中的调用函数从“#name”更改为“.name”，但没有成功。

我也试过shown.bs函数

// 这是我的代码 table（部分）

    <?php
    if ($result = mysqli_query($conn, $sql_accounts)) {
    while ($row=mysqli_fetch_array($result)) {
    ?>
    <tr>
    <form action="update.php" method="POST">
    <td>
    <?php echo $row["username"]; ?> </td>
    <td>
    <?php echo $row["firstname"]; ?> </td>
    <td> .....
    <td>
    <?php echo $row["status"]; ?> </td>
    <td>
    <?php
    if ($row["status"] == "Deactivated") {
    ?>
    <a href="update.php?activate=<?php echo $row['accountid']; ?>" class="btn btn-info"> Activate </a>
    <?php
    } elseif ($row["status"] == "Active") {
    ?>
    <a href="update.php?deactivate=<?php echo $row['accountid']; ?>" class="btn btn-warning"> Deactivate </a>
    <?php
    } ?>
    <a href="#edit<?php echo $row['accountid']; ?>" data-toggle="modal" class="btn btn-success" data-toggle="modal">Edit</a>

// 这是我的模态代码（部分）

    <div id="edit<?php echo $row['accountid']; ?>" class="modal fade" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Edit Account</h4>
    </div>
    <div class="modal-body">
    <form method="POST" action="editaccount.php">
    <div class="form-group">
    <input type="hidden" name="edit_item_id" value="<?php echo $row['accountid']; ?>">
    <label>Username</label>
    <span id="popover-username" class="pun hide pull-right block-help"><i class="fa fa-info-circle text-danger" aria-hidden="true"></i> Username must not contain any special characters</span>
    <input type="text" id="username" name="username" class="username form-control" value="<?php echo $row['username']; ?>" placeholder="Enter Username">

//这是我的javascript函数

    <script>
        $(document).ready(function() {

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {
                    $("#submit").attr('disabled', 'disabled');
                }
            });

            $('#confirm_password').blur(function() {
                if ($('#password').val() !== $('#confirm_password').val()) {
                    $('#popover-cpassword').removeClass('hide');
                    $("#submit").attr('disabled', 'disabled');
                } else {
                    $('#popover-cpassword').addClass('hide');
                    $("#submit").removeAttr('disabled');
                }
            });

            $('#username').blur(function() {
                var regex = /\`|\~|\!|\@|\#|$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s/;
                if ($('#username').val().match(regex)) {
                    $('#popover-username').removeClass('hide');
                    $("#submit").attr('disabled', 'disabled');
                } else {
                    $('#popover-username').addClass('hide');
                    $('#sign-up').attr('disabled', false);
                    $("#submit").removeAttr('disabled');
                }
            })

            $('#contact_number').blur(function() {
                var regex = /^[(9)][(\d+)]{9}$/;
                if ($('#contact_number').val().match(regex)) {
                    $('#popover-cnumber').addClass('hide');
                    $("#submit").removeAttr('disabled');
                } else {
                    $('#popover-cnumber').removeClass('hide');                        
                    $("#submit").attr('disabled', 'disabled');
                }
            });

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {
                    $("#submit").attr('disabled', 'disabled');
                }
            });

一旦输入错误，就会出现一条消息，例如我在用户名字段中输入#，应该有一条消息用户名必须包含任何特殊字符，其中 javascript 函数删除了 class 从模态中的跨度代码中隐藏

Answer 1

正如我上面提到的，你应该使用 class 选择器，而且我稍微改进了你的验证

$('.password').keyup(function() {
  $("#submit").prop('disabled', checkStrength($(this).val()) === false);
});

$('.confirm_password').blur(function() {
  var arePasswordTheSame = $('.password').val() !== $(this).val();
  $('.popover-cpassword').toggleClass('hide', !arePasswordTheSame);
  $("#submit").prop('disabled', !arePasswordTheSame)
});

$('.username').blur(function() {
  var regex = /\`|\~|\!|\@|\#|$|\%|\^|\&|\*|\(|\)|\+|\=|\[|\{|\]|\}|\||\|\'|\<|\,|\.|\>|\?|\/|\""|\;|\:|\s/;
  var isUserNameCorrect = $(this).val().match(regex);
  $('.popover-username').toggleClass('hide', !isUserNameCorrect);
  $(".submit").prop('disabled', !isUserNameCorrect);
  $('.sign-up').prop('disabled', !isUserNameCorrect);
})

$('.contact_number').blur(function() {
  var regex = /^[(9)][(\d+)]{9}$/;
  var isNumberCorrect = $(this).val().match(regex)
  $('.popover-cnumber').toggleClass('hide', !isNumberCorrect);
  $(".submit").prop('disabled', !isNumberCorrect);
});

您还需要将当前容器添加到所有 class 选择器。更多信息请参考API

Answer 2

只有当您的 php 代码生成一个

时，此方法才有效

每个帐户，将它们全部放入 html。

Javascript 函数仅适用于我模态内的第一行

Javascript function only works on the first row only inside my modal

html

javascript

php

modal-dialog