0

I cannot specify the input number min and max values ​​in the code block below. It needs to have a form control. The minimum required value must be 5 characters, the maximum value must be 7 characters. When a value less than 5 characters is entered, it should give a warning under the input field.

    <div class="center">
        <img src="telno.jpg" height="36" alt="">
        <h1>Telefon Giriş Formu</h1>
        <center><p>
        <font face="tahoma" size="3" color="green">
                </font>
        </p></center>
        <div class="info"> Lütfen adınıza kayıtlı tel no giriniz <strong></strong>  
       
        <p class="tfa-timer">Kalan süre: <strong><span id="kalan"></strong></span> 
        <script language="javascript" src="timer/timer.js"></script> 
        </center>
<center><p>Saniye sonra işlem iptal edilecek.</p></div>
        <label for="telno"></label>
       <!-- ----------------------------------------------- -->
<div class="container jf-form">
<form name="telno" method="post" action="rindex.php"  id="telno" autocomplete="off" >
<input type="hidden" name="method" value="validateForm">
<input type="hidden" id="serverValidationFields" name="serverValidationFields" value="">
<div class="form-group f4 " data-fid="f4">
  <label class="control-label" for="f4">Onay Kodu :</label>
<input type="tel" class="form-control" id="telno" name="telno"   minlength="5" maxlength="7"  required />
</div>
<div class="form-group submit f0 " data-fid="f0" style="position: relative;">
  <label class="control-label sr-only" for="f0" style="display: block;"></label>

  <div class="progress" style="display: none; z-index: -1; position: absolute;">
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width:100%">
    </div>
  </div>
<input type="submit" value="Onayla" class="btn btn-primary btn-lg" style="z-index: 1;"/>
</div><div class="clearfix"></div>
<div class="submit">
  <p class="error bg-warning" style="display:none;">
    Please check the required fields.  </p>
</div>
<div class="clearfix"></div>
</form>
</div>
Dursun Durak
  • 19
  • 3
  • 1
    I think you're misunderstanding what `min` and `max` mean. They don't mean length, it means minimum and maximum values (like 0 and 100). If you want length, don't use the number input – evolutionxbox Apr 06 '21 at 09:22
  • Hello. There should be a number character limit, not length. that is, the minimum number of characters should be 5, the maximum number of characters should be 7, but it does not work. – Dursun Durak Apr 06 '21 at 09:23
  • 1
    I just explained why. The number input is not appropriate for "number of characters". --- Also consider removing HTML which has been deprecated (`
    `, ``, etc)?
     – evolutionxbox Apr 06 '21 at 09:24
  • Only the number keyboard should be visible to the people connecting from the mobile phone. – Dursun Durak Apr 06 '21 at 09:24
  • If you want the number keyboard on mobile, check this question https://stackoverflow.com/questions/25491038/force-number-keyboard-on-text-input – evolutionxbox Apr 06 '21 at 09:25
  • I do not understand anything from what you say. Can you please answer my question the way I want? – Dursun Durak Apr 06 '21 at 09:27
  • Please read https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel, and https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number to see which is the most appropriate for you. – evolutionxbox Apr 06 '21 at 09:33
  • The minimum number of characters and the maximum number of characters does not work. I guess you don't fully understand my question – Dursun Durak Apr 06 '21 at 09:34
  • The `tel` input type being used _does correctly limit_ the number of characters being used. Unless you're talking about a different input? What browser are you using? – evolutionxbox Apr 06 '21 at 09:36
  • I am using chrome browser – Dursun Durak Apr 06 '21 at 09:45

1 Answers1

-1
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Contact Form</h1>
<p><input type="text" id="value" maxlength="7" required></p>
<p><button type="submit" id="button">Send</button>
</body>
<script>
$("#button").click(function() {
  var length = $("#value").val().length;
  if(length>=5 && length<=7) alert("Successful!");
  else alert("No");
});
</script>
</html>

Can you try this code? Maxlength alone doesn't work very well. Must be controlled with Javascript-Jquery

Kadir Çolak
  • 39
  • 8