HTML5 pattern to work

Question

I've not been able to make work this html5 form validation. Anybody please suggest how to fixed it. See jsfiddle When I press any key on the input box the firebug console says SyntaxError: invalid quantifier

    <form action="#" method="post" class="form-validate" id="bidform">

      <div class="input_wrapper">
         <input placeholder="Enter Zip Code" type="text" pattern="[0-9]{3,5}"
            oninvalid="setCustomValidity('Please enter valid zip')" id="zip" class="validate-numeric" required name="zip">
      </div>


      <div class="submit_row">
         <input class="submit" value="Submit a Bid!" type="submit" name="subbid">
      </div>
    </form>

score 4 · Accepted Answer · edited May 23 '17 at 11:50

4

It looks like the pattern is invalid. If you are trying to match 5 digits you just need "[0-9]{5}". If you are trying to match 3-5 digits it should be "[0-9]{3,5}".

There also seems to be an issue with setCustomValidity(). After it gets called once any furter attempts to submit the form always result in error.

How can I change or remove HTML5 form validation default error messages? suggests that you can fix this by adding onchange="try{setCustomValidity('')}catch(e){}".

edited May 23 '17 at 11:50

Community

1
1

answered Oct 05 '12 at 06:19

Nathan Villaescusa

17,331
4
53
56

I want to match the digit 3-5 – vusan Oct 05 '12 at 06:20
I check putting {3,5} but It don't work. thanks @Nathan I will update my answer again. – vusan Oct 05 '12 at 06:25
It's not working too. My problem now is that we can submit with any input character if we just have refreshed. But if we submit with blank, the tooltips appear and then after the tooltips continue to appear ignoring our any pattern. – vusan Oct 05 '12 at 06:35
1

I've been having that problem too. It seems to go away when I remove oninvalid="setCustomValidity('Please enter valid zip')" – Nathan Villaescusa Oct 05 '12 at 06:38
But how to make our custom message? Now I'm checking that. – vusan Oct 05 '12 at 06:39
http://stackoverflow.com/questions/10361460/how-can-i-change-html-5-form-validation-errors-default-messages seems to suggest that you need to add onchange="try{setCustomValidity('')}catch(e){}" – Nathan Villaescusa Oct 05 '12 at 06:42
thanks for your help which really solve my problem. Now I am managing my code by just putting alert to just work for now. `oninvalid="if(this.value) alert('invalid zip')"`. – vusan Oct 05 '12 at 06:50

score 0 · Answer 2 · answered Oct 05 '12 at 06:25

0

Strange error, I see it in Firefox as you described but it works fine in Opera. Anyway, it seems related to you regular expression somehow so changing that a bit made it work fine there as well. Instead of using {3}{5} to tell the number of digits I simply wrote it as \d\d\d\d?\d? making three digits required and the two last one optional.

answered Oct 05 '12 at 06:25

Karl-Johan Sjögren

16,544
7
59
68

I just changed the pattern-attribute to `pattern="\d\d\d\d?\d?"`. – Karl-Johan Sjögren Oct 05 '12 at 06:31

HTML5 pattern to work

2 Answers2