Bookmarklet to remove HTML5 form requirements

So, you’ve made a form, and you’re using the hip and new HTML5 attributes for your elements, such as ‘pattern’ or ‘required’, or “input type=’email'” in order to have an easy client-side form verification method. It’s not secure, but it’s pretty nice UI. Except, what do you do after you’ve done that and need to test that your server-side verifications work? Your browser, if it’s any good, won’t allow you to submit an incorrect form anymore. You have to go into developer tools and remove these attributes, which is annoying.
So, I made a few lines of javascript that remove every ‘pattern’ and ‘required’ attribute they find in your HTML code, and change every type=’email’, type=’url’ and type=’number’ to type=’text’

var elems = document.getElementsByTagName("*");

for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    if (elem.getAttribute('required') !== null) {
        elem.removeAttribute('required');
    }
    if (elem.getAttribute('pattern') !== null) {
        elem.removeAttribute('pattern');
    }
    if (elem.type === 'email' || elem.type === 'number' || elem.type === 'url') {
        elem.type = 'text'
    }
}

void(0);

If you compress it, you end up with a nice browser bookmarklet:

javascript:var elems=document.getElementsByTagName("*");for(var i=0;i<elems.length;i++){var elem=elems[i];if(elem.getAttribute('required')!==null){elem.removeAttribute('required')}if(elem.getAttribute('pattern')!==null){elem.removeAttribute('pattern')}if(elem.type==='email'||elem.type==='number'||elem.type==='url'){elem.type='text'}}void(0);

Better copyable version of the bookmarklet – sorry, wordpress ruins it

Simply copy and paste (preferably from the ‘better copyable version’ so that there’s nothing in the HTML here that can break it) that and add a bookmark with that as the URL. Then you can just click on it when you need it!

Leave a Comment

Your email address will not be published. Required fields are marked *