Question

我正在使用javascript函数进行模态内输入验证。我单击第一行的“编辑”按钮，javascript函数运行良好。但是，当我单击第二行以及后续行上的“编辑”按钮时，它不起作用。

我不确定问题出在模态内部还是模态外部

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

我也尝试了show.bs函数

//这是我的表格代码（部分）

    <?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函数从模式中的范围代码中删除了类隐藏

Answer 1

如上所述，您应该使用类选择器，并且我对您的验证也做了些改进

$('.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);
});

此外，您还需要将当前容器添加到所有类Seelctor。有关更多信息，请参考API

Answer 2

仅当您的php代码生成一个

时，此方法才有效

每个帐户都将其全部放入html中。

Javascript函数仅在我的模态内仅在第一行起作用

2 个答案: