Menu
With Pug (previously named Jade) templating engine, how can I use the pattern attribute of an input ?
When I use a pattern like:
input( type="tel", pattern="\d{7}" )
the rendered pattern is:
<input type="tel" pattern="d{7}">
I also tried with the unescaped attribute != but it still escapes the \ character.
Note: it works perfectly with pattern="[0-9]{7}".
854
If you need to use special characters, use != instead of = .
The general rendering process of Pug is simple. pug. compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals ”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.
To convert your HTML files to Pug, you can use the html2pug npm package. The html2pug package currently only works in Node. js, so you need an API endpoint if you want to use it from a browser app. Below is an example of using html2pug in Node.
Notice that coding using the PUG framework is much easier and more readable than thr HTML codes. PUG makes use of indentation to distinguish between where a tag starts and ends. This makes the code much cleaner than HTML, where lack of indentation and a need for closing tags makes the code a little cluttered.
The problem here is that the \ character is used to escape Javascripts's own special characters.
You need to escape it so it will be rendered in the pattern, as explained here.
input( type="tel", pattern="\\d{7}" )
will render properly as:
<input type="tel" pattern="\d{7}">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With