We are doing a test using html code yezwa?!


nayike leyo test mfanakithi.

Author( Sizwe Cele ) - 2017-01-09 18:57:05

up vote798down voteaccepted

You can use the pattern attribute. The required attribute is also needed, otherwise an input field with an empty value will be excluded from constraint validation.

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

If you want to create the option to use the pattern for "empty, or minimum length", you could do the following:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">
shareeditflag
 
102  
   
+1 for using html5 instead of jQuery. I just wanted to add that the title attribute allows you to set the message to display to the user if the pattern is not met. Otherwise a default message will be shown. – J.Money Aug 30 '12 at 22:46
10  
   
@J.Money It still says "Please match the requested format: <title>". Is there a way to bypass the prior default message? – CᴴᴀZ Oct 1 '13 at 7:52
41  
   
Unfortunately this is not supported for textareas. – ThiefMaster Nov 15 '13 at 23:35
4  
   
Totally works, but the error you get when not meeting the pattern requirements is: "Please match the requested format" or something along those lines. It begs the follow up question: how do you customize the error message :-) – Randy Greencorn Dec 15 '13 at 7:41
16  
   
@ChaZ @Basj You can add a custom error message by adding the following attribute: oninvalid="this.setCustomValidity('Your message')" – bigtex777 Nov 26 '14 at 20:31

In my case, in which I validate the most at hand and using Firefox (43.0.4), minlength and validity.tooShort are not available unfortunately.

But since I only need to have minimum lengths stored to proceed, an easy and handy way is to assign this value to another valid attribute of the input tag. In that case then, you can use min, max, and step of other properly from non-text type inputs (type="number"), but still inputs.

Rather than storing those limits in an array it's easier to find it stored in the same input instead of getting the element id to match the array index.

shareeditflag
 

My solution for textarea using jQuery and combining HTML5 required validation to check the minimum length.

minlength.js

$(document).ready(function(){
  $('form textarea[minlength]').on('keyup', function(){
    e_len = $(this).val().trim().length
    e_min_len = Number($(this).attr('minlength'))
    message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
shareeditflag
Author( Sizwe Cele ) - 2017-01-09 18:57:05




Comments:

There's 4 comments
Jabulani

dfg dg dfg fg d gdfg dfg dfg gdf - 2017-01-13 08:54:48


Ehe

Aibo mfwe2 - 2017-01-13 09:10:44


Charlesimmap

Click here>>> - 2017-09-09 23:23:17


Lesedup

What Is Keflex Ordered For generic 5mg cialis best price Cialis En Pharmacie - 2019-08-21 20:51:50









© All Rights Reserved 2016. Website developed byCOSMIC WEB AND GRAPHICS