Alert message when input is greater or lower than 16 digits

Question

I have created this:

<form class="form-horizontal" method="post" action="profile.php">
    <div class="form-group">
        <label class="col-sm-2 control-label">Card Number</label>
        <div class="col-sm-7"> 
            <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
        </div>
        <button class="btn btn-primary demo1" type="submit" id="submit" onclick="check()">SEARCH</button>
</div>

When the card's length is greater or lower than 16 an alert message must be displayed. So I tried this:

$('#submit').onclick(function() {
    var inputlength = $('#card_no').val().length;
    if (inputlength<>16) {
        sweetAlert("ERROR", "Card must have 16 digits", "warning");
        return false;
    }
});

But it doesn't work. I also have an alert when there is NO input and works fine! Any ideas?

In Javascript the 'not equal to' operator is `!=`, not `<>`: `if (inputlength != 16)...` — Rory McCrossan, Jun 14 '16 at 14:49
There may be other errors in your code, try checking the console. You can remove the `onclick="check()"` attribute on your submit button too — Rory McCrossan, Jun 14 '16 at 14:51
``var inputlength = $('#card_no').val().length;`` why you are check the length ? — Neelesh, Jun 14 '16 at 15:01
@Neelesh because it's the requirement of the input to be 16 characters... — Rory McCrossan, Jun 14 '16 at 15:06

score 2 · Accepted Answer · answered Jun 14 '16 at 15:14

Use if(inputlength !== 16)

$('#submit').on('click',function() {
  var inputlength = $('#card_no').val().length;
  if (inputlength !== 16) {
    sweetAlert("ERROR", "Card must have 16 digits", "warning");
    return false;
  }
});

<link href="https://cdn.jsdelivr.net/sweetalert/1.1.3/sweetalert.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/sweetalert/1.1.3/sweetalert.min.js"></script>
<form class="form-horizontal" method="post" action="profile.php">
  <div class="form-group">
    <label class="col-sm-2 control-label">Card Number</label>
    <div class="col-sm-7">
      <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
    </div>
    <button class="btn btn-primary demo1" type="submit" id="submit">SEARCH</button>
  </div>
</form>

Neelesh · Answer 2 · 2016-06-14T15:07:20.710

This should work. Just change alert with your sweetAlert

$('#submit').click(function() {
    var inputlength = $('#card_no').val().length;
    if (inputlength!=16) {
        alert("ERROR", "Card must have 16 digits", "warning");
        return false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" action="profile.php">
    <div class="form-group">
        <label class="col-sm-2 control-label">Card Number</label>
        <div class="col-sm-7"> 
            <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
        </div>
        <button class="btn btn-primary demo1" type="submit" id="submit">SEARCH</button>
</div>

yeah i know. i used ``alert`` instead. – Neelesh Jun 14 '16 at 15:00 — Neelesh, Jun 14 '16 at 15:00

Sleek Geek · Answer 3 · 2016-06-14T15:14:42.923

See the example below and make adjustments if necessary. Using != sets it so that when entered value is lesser-than or greater-than the defined value, the alert will be triggered.

$('#submit').on("click", function() {
  
  var $inputlength = $('#card_no').val();
  
  if ($inputlength != 16) {
    
    alert('ERROR, Card must have 16 digits. "warning!"'); 
    
    /* Change "alert" to sweetAlert */
    
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="post" action="profile.php">
  <div class="form-group">
    <label class="col-sm-2 control-label">Card Number</label>
    <div class="col-sm-7">
      <input type="text" id="card_no" class="form-control" name="card_number" maxlength="16" autofocus="autofocus">
    </div>

    <button type="submit" id="submit" ">SEARCH</button>
</div>

Juan Davila · Answer 4 · 2016-06-14T15:26:28.927

-1

You need to name your function check() if you want to call the function. Also, the logic operator is not correct, there is a <>, and a < is needed to test the input.

$('#submit').onclick(function check() {

          var inputlength = $('#card_no').val().length;

         if (inputlength<16) {
        alert("ERROR", "Card must have 16 digits", "warning");
                return false;
       }
     });

edited Jun 14 '16 at 15:26

answered Jun 14 '16 at 14:50

Juan Davila

61
1
11

edited my answer, just notice the logic operator was incorrect. – Juan Davila Jun 14 '16 at 14:57
Maybe try using onclick="submit", instead of check(), If your just using `function () {}` – Juan Davila Jun 14 '16 at 14:58
1

`just notice the logic operator was incorrect` And it still is – j08691 Jun 14 '16 at 14:59
Given that the OP has set `maxlength` on the element `> 16` will never be true. You should use either `< 16` or `!= 16` – Rory McCrossan Jun 14 '16 at 15:05
ah, did not account for the max length, !=, would be the most accurate, though not all card numbers are 16 digits... – Juan Davila Jun 14 '16 at 15:25
I changed the answer to <, if the card number really is 16 digits, then != could be used. – Juan Davila Jun 14 '16 at 15:27

Alert message when input is greater or lower than 16 digits

4 Answers4