Question

我想使用keyup函数传递id。以下是代码

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Card Validation</title>
</head>
<body>
    <div class="form-group" id="card-number-field">
        <input type="text" name="cn" placeholder="Card Number" class="form-control" id="cardNumber" required>
    </div>

    <div class="f1-buttons">
        <button type="button" class="btn btn-previous">Previous</button>
        <button type="submit" name="sendData" class="btn btn-submit">Submit</button>
    </div>

    <div class="col-sm-5 col-md-4 col-lg-1 form-box">
        <div class="aro-pswd_info">
            <div id="pswd3_info">
                <h4>Enter a Valid Card Number</h4>
                <ul>
                    <li id="cardNo" class="invalid"><strong>Card Number Validation</strong></li>
                </ul>
            </div>
        </div>
    </div>

    <script>
    $(document).ready(function(){
        $('.sendData').attr('disabled',true);
        $('#cardNo').keyup(function(){
            var card= $(this).val();

            //valid Card Number
            if ( card.length = 16 ) {
                $('#cardNo').removeClass('valid').addClass('invalid');
                $('.sendData').attr('disabled',false);
            } else {
                $('#cardNo').removeClass('invalid').addClass('valid');
                $('.sendData').attr('disabled',true);
            }

        }).focus(function() {
            $('#pswd3_info').show();
        }).blur(function() {
            $('#pswd3_info').hide();
        });
    });
</script>
</body>
</html>

如果我更改以下行，代码将正常工作。但我想通过使用输入[type = text]将其作为id（#cardNo）传递。对不起我还是新手

$('input[type=text]').keyup(function(){

//continue code }

如果用户输入的长度低于16，则提交按钮将被禁用。如果用户输入长度等于16，则提交按钮将启用。

Answer 1

首先，您必须在该代码中包含jquery脚本。然后你在keyup事件中绑定#cardNo，但你必须使用#cardNumber。试试吧！

Answer 2

您使用的是错误的ID。使用#cardNumber代替#cardNo。希望这会有所帮助：

$(document).ready(function(){
   $('.sendData').attr('disabled',true);
     $('#cardNumber').keydown(function() {
        var card= $('#cardNumber').val();
           console.log(card);

        //valid Card Number
        if ( card.length = 16 ) {
         // LOGIC HERE
        }
    }).focus(function() {
        $('#pswd3_info').show();
    }).blur(function() {
        $('#pswd3_info').hide();
    });
});

这是下面的JSFiddle。它没有完成但它应该给你一个很好的指示如何实现你的目标。祝你好运。

JSFiddle

Answer 3

您可能尝试实现此结果

temp

$(document).ready(function() {
  $('.sendData').attr('disabled', true);
  $('#pswd3_info').hide();
  $('#cardNumber').keyup(function() {
    handleValidation(this);
  }).focus(function() {
    handleValidation(this);
  }).blur(function() {
    handleValidation(this);
  });

  function handleValidation(input) {
    var card = $(input).val();
    //valid Card Number
    if (card.length == 16) {
      $('#cardNo').removeClass('invalid').addClass('valid');
      $('.sendData').attr('disabled', false);
      $('#pswd3_info').hide();
    } else {
      $('#cardNo').removeClass('valid').addClass('invalid');
      $('.sendData').attr('disabled', true);
      $('#pswd3_info').show();
    }
  }

});

希望这有帮助

使用keyup函数传递输入id

3 个答案: