3

I'm using this code to limit my field to take the exact number of character, but maxlength = "10" is taking less than 10 character as well. I need to have my input field to take exact 10 character and if I put less than 10 will send an error. how can I do that? here is my code :

 <form action="login.php">
   Username: <input type="text" name="usrname" maxlength="10"><br>
  <input type="submit" value="Submit">
</form>
doudy_05
  • 61
  • 4
  • For HTML5 browsers or all browsers? `pattern` for HTML5 should work, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input. For all browsers I'd use JS or process server side. – chris85 Oct 10 '16 at 03:24
  • Even if you do it in HTML or JS, you still need to check on the server, since users can bypass those checks. Client-side checks are just for added convenience. – Barmar Oct 10 '16 at 03:25
  • Thank you, I'll try and see – doudy_05 Oct 10 '16 at 03:37
  • just a heads up, you'll also want it to be a required field. see my answer below. – JaeGeeTee Oct 10 '16 at 03:38

4 Answers4

2

As mentioned in this answer: https://stackoverflow.com/a/10294291/1515869

If you wanted to stick with HTML5 you could use pattern like so:

<input pattern=".{10}"   required placeholder="only 10 characters">

However, note in the answer linked above, you'll also need the required attribute as well in order to pass constrain validation.

Community
  • 1
  • 1
JaeGeeTee
  • 513
  • 1
  • 6
  • 23
  • Thank you! this worked, but I want to add a message if I enter less than 10 Character. for now the error message is empty. "You must use this format: " I need to add the number of character. How to edit this error message to you whatever I want? – doudy_05 Oct 10 '16 at 03:44
  • Pretty simple to do with JS. @doudy_05 Take a look here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation#Customized_error_messages – JaeGeeTee Oct 10 '16 at 03:50
0

You can use javascript like below:

<script type="text/javascript">    
    function checkLength(){
        var usrname = document.getElementById("usrname");
        if(usrname.value.length == 10){
            alert("success");
        } 
        else{
            alert("make sure the input is 10 characters long")
        }
    }
</script>

<form action="login.php">
   Username: <input type="text" id="usrname" maxlength="10"></input><br>
   <input type="submit" value="submit" onclick="checkLength()" />
</form>
Alex Rindone
  • 296
  • 2
  • 9
0

Use HTML <input> pattern Attribute

<form action="login.php">
   Username: <input type="text" name="usrname" pattern=".{10}" required><br>
  <input type="submit" value="Submit">
</form>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Risul Islam
  • 804
  • 1
  • 12
  • 24
  • needs to be required in order to pass constraint validation if initial value is empty (see here: https://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation) – JaeGeeTee Oct 10 '16 at 03:36
  • Thank you for the fast response. a lot appreciate it ! – doudy_05 Oct 10 '16 at 03:44
0

You'll probably want to do some server side checking too since client side Javascript can be modified.

if(strlen($_POST['usrname']) == 10){
   // Length matches
} else {
   // Length does not match
}

It would probably be a better idea to make a function if you plan on reusing this with varying input and lengths.

dsanchez
  • 1,038
  • 9
  • 9