[SOLVED] html input field using regex to get rid of invalid characters for filename

html input field using regex to get rid of invalid characters for filename

I have an input field in my form where user can type in something which will be used as a foldername on a windows-system later. Now I want to prevent ppl using any characters invalid for foldername, which are \/:"*?<>|. I found the pattern-attribute for html input field where I can use a regex. Now I am having trouble getting the right regex and escape this properly in my html code:

<div class="form-group">
    <label class="col-md-3 control-label" for="folder_name">Folder-Name:</label>
    <div class="col-md-9">
        <input type="text" class="form-control" id="folder_name" name="folder_name" pattern="[^\\/:\"\*\?<>|]+" required>
    </div>                    
</div>

what am I doing wrong?

Solution

You need to use a \x22 instead of a double quote:

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<div class="form-group">
    <label class="col-md-3 control-label" for="folder_name">Folder-Name:</label>
    <div class="col-md-9">
        <input type="text" class="form-control" id="folder_name" name="folder_name" pattern="[^\\/:\x22*?<>|]+" required>
    </div>                    
</div>