сообщение оповещения при входе больше или меньше, чем 16 цифр

Question

я создал это:

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

Когда длина карты больше или меньше, чем 16 должно отображаться предупреждающее сообщение. Поэтому я пробовал это:

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

Но это не работает. У меня также есть предупреждение, когда нет ввода и работает нормально! Есть идеи?

Answer 1

Использование 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>

Answer 2

Для того, чтобы вызвать функцию, вам нужно указать свою функцию check(). Кроме того, логический оператор неверен, есть <>, а для проверки ввода требуется <.

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

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

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

Answer 3

Это должно сработать. Просто измените alert с вашим 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>

Answer 4

Смотрите пример ниже, и внести коррективы в случае необходимости. Использование != устанавливает его так, что, когда введенное значение меньше или больше, чем заданное значение, будет активировано предупреждение.

$('#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>