HTML5 pattern to work

htmlregex

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>

Best Answer

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){}".

Related Solutions

Javascript – Why don’t self-closing script elements work

XHTML 1 specification says:

С.3. Element Minimization and Empty Element Content

Given an empty instance of an element whose content model is not EMPTY (for example, an empty title or paragraph) do not use the minimized form (e.g. use <p> </p> and not <p />).

XHTML DTD specifies script elements as:

<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>

Javascript – Storing Objects in HTML5 localStorage

Looking at the Apple, Mozilla and Mozilla again documentation, the functionality seems to be limited to handle only string key/value pairs.

A workaround can be to stringify your object before storing it, and later parse it when you retrieve it:

var testObject = { 'one': 1, 'two': 2, 'three': 3 };

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

console.log('retrievedObject: ', JSON.parse(retrievedObject));

Best Answer

Related Solutions

Javascript – Why don’t self-closing script elements work

Javascript – Storing Objects in HTML5 localStorage

Related Topic