I am new in Thymeleaf, had searched on the web and SO for usage of html regex. I am not passing a th:object to my frontend for this page, hence What I would like is to handle validation with a pattern attribute in the form input. Would like to warn user if they don't enter extension for the file. (".xml" in this case). So I'd like to see if string contains substring or not.
However could not see why following fails.
(Used the fileName field with pattern="/xml/", since static value is being checked on the regex. Also tried th:pattern but no luck.)
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="#{layouts/main}">
<div layout:fragment="content" class="container">
<div class="page-header">
<h2>Add New Project</h2>
</div>
<!-- multistep form -->
<div id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Project Details</li>
<li>Choose operations</li>
<li>Save operations</li>
<li>project saved</li>
</ul>
<form id="project-details" class="project" method="post">
<h2 class="fs-title">Project Details</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" th:field="${testSuitProject.name}" placeholder="Project Name" />
<input type="text" th:field="${testSuitProject.endpoint}" placeholder="Service End Point" />
<input type="text" th:field="${testSuitProject.fileName}" placeholder="FileName ex: sample_project.xml" pattern="/xml/" />
<input type="submit" name="next" id="btn-first" class="next action-button" value="Next" />
</form>
</div>
</div>
Any suggestions appreciated.
Your regex is simply wrong. To match string to end with ".xml":
<input type="text" placeholder="FileName ex: sample_project.xml" pattern=".*\.xml" />
.* = match any characters (in the beginning of the string).
\. = a literal dot, since dot means any character in regex.
(Maybe you confuse with JavaScript where reg expression is surrounded by /:es to create a regex object.)
Related
I need to include jinja templating in element.innerHTML but jinja is not working.
Code script.js:
contentDiv.innerHTML = getContent(fragmentId);
function getContent(fragmentId) {
var pages = {
quad1: `
<form class="form-inline" method="POST" id="form1">
<h3>
<input type="number" id="quad_a1" name="input_a" class="form-control mx-2 col-1" placeholder="a">
<b>x² +</b>
<input type="number" id="quad_b1" name="input_b" class="form-control mx-2 col-1" placeholder="b">
<b>x +</b>
<input type="number" name="input_c" class="form-control mx-2 col-1" placeholder="c">
<b>=</b>
<input type="number" name="input_d" class="form-control mx-2 col-2" placeholder="Default(0)">
<button type="submit" class="btn btn-primary float-right mr-5" onclick="return empty_quad()">Solve</button>
</h3>
</form>
{{ sol }}
`,
.
.
.
};
return pages[fragmentId];
}
But the output is literally {{ sol }}, not the value of sol:
So how to access the variable sol passed through flask's render_template() in script.js?
You can't use jinja2 template in your js file.
First method: You have to use inline javascript in html file using <script></script> tag, and then you can access the sol variable by assigning it to javascript variable
<script> sol = "{{sol}}" </script> // {{sol}} should be between quotation marks
Second method: If you have seperate js file. you can make a div tag, define it's class and set it's id to {{sol}}. get the element by class name and then get it's id.
Html
<div class="myclass" id="{{sol}}" style="display:none"></div>
javascript
elem= document.getElementsByClassName("myclass") ;
console.log(elem.id) // this is the sol value.
json_script
Safely outputs a Python object as JSON, wrapped in a <script> tag, ready for use with JavaScript.
Argument: HTML “id” of the <script> tag.
For example:
{{ value|json_script:"hello-data" }}
If value is the dictionary {'hello': 'world'}, the output will be:
<script id="hello-data" type="application/json">{"hello": "world"}</script>
The resulting data can be accessed in JavaScript like this:
const value = JSON.parse(document.getElementById('hello-data').textContent);
XSS attacks are mitigated by escaping the characters “<”, “>” and “&”. For example if value is {'hello': 'world</script>&'}, the output is:
<script id="hello-data" type="application/json">{"hello": "world\\u003C/script\\u003E\\u0026amp;"}</script>
This is compatible with a strict Content Security Policy that prohibits in-page script execution. It also maintains a clean separation between passive data and executable code.
django doc
I'm trying to limit my text input to only allow letters, not numbers. With a maximum of 100 characters. I'm having trouble finding out how to use the pattern attribute to only allow letters. Here is a portion of my code attempting this.
<form action="http://www.severien.com/grit/formecho.php" method="post" target="_blank">
<label for="videorequests"> Video Requests:</label>
<input type="text" id="videorequests" name="videorequests" maxlength="100" pattern="[a-z]{1,100}" />
<input type="submit" value="Submit" class="submitbutton" />
</form>
Using the attribute maxlength I'm limiting the character input to 100. How do I use pattern to limit the character use to only letters, excluding numerical characters?
use this
pattern="[A-Z a-z]{1,100}"
Have a small issue and wondering if some one can help me out.
I have a text search box like this that
<form class="navbar-form navbar-left" role="search" action="/library/search/">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input class="form-control" id="q" name="P" type="text" placeholder="Book Search"">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
</form>
When I type in a word and hit submit a URL is generated as follows,
http://127.0.0.1:8000/library/search/?P=Harry+Potter
In the URLs.py I have something like this
url(r'^search/(?P<search_result>[\w|\W.#+-]+)/$', views.search_view, name='search_view')
However the above url is not being matched by the regex statement. If I manually remove the ?P= from the url it works fine.
I have tried some of the following combination and they didn't work either
url(r'^search/(?P(.*)<search_result>[\w|\W.#+-]+)/$', views.search_view, name='search_view')
Any idea what it could be ?
Thanks
You've misunderstood what ?P means in a regex. It states that the group is a named group, which is captured and sent to a view by a keyword argument. The URL that would satisfy that regex is like this:
/library/search/harrypotter/
But that's not at all what you want from a search; you want something like the one you have created, ie library/search/?P=harry+potter. For that you just want a URL without parameters:
r'^search/$'
and get the data in the view:
query = request.GET['p']
although you probably want to use q rather than p.
I'm trying to render the template in GSP page
template:
<div class="container">
${body()}
</div>
template call:
<g:render template="/shared/wrapperTemplate">
<g:textField name="${property}" value="${value}" id="${property}id" class="form-control"/>
</g:render>
The body() is evaluated correctly and renders
<input type="text" name="name" value="" id="nameid" class="form-control" />
but when passing it to the template, it is surrounded by the quotes and instead of displaying input field, it prints the html input as string to the html page
I also tried with write TagLib
def fieldTemplate = { attrs, body ->
out << render(template: "/shared/wrapperTemplate", model: [content: body()])
}
But the result was the same (of course I had to change the tag call)
The idea was to reuse the formatting part of the template <div> for all _wrapper.gsp templates in Fields plugin, but not copy paste it. The case above is simplified, but I use Twitter Bootstrap and there is a bunch of lines that I don't want to copy.
_fields/default/_wrapper.gsp:
<div class="form-group ${hasErrors(bean:bean,field:property,'has-error')}">
<label for="${property}id" class="col-sm-2 control-label">${label}</label>
<div class="col-sm-10">
<g:textField name="${property}" value="${value}" id="${property}id" class="form-control" />
</div>
</div>
_fields/date/_wrapper.gsp:
<div class="form-group ${hasErrors(bean:bean,field:property,'has-error')}">
<label for="${property}id" class="col-sm-2 control-label">${label}</label>
<div class="col-sm-10">
<g:datePicker name="${property}" value="${value}" precision="day" id="${property}id" class="form-control" />
</div>
</div>
I am not able to understand the following lines of your post
but when passing it to the template, it is surrounded by the quotes
and instead of displaying input field, it prints the html input as
string to the html page
What is it in this case, please share the exact code which is not working.
The first example you shared is working for you, in the second example you passed content as parameter. When you are passing the parament then you need to change your code from
${body()}
to
${raw(content)}
I am still not sure what is the exact code which not working, just a wild guess.
I have two different forms on my home page: one for logins and one for registrations. As you can see from the code, the forms have inputs with different names:
<h3> Log In </h3>
<form action="/login/" method="POST" class="form-vertical" style="padding-top: 5px">
<input id="id_login_username" type="text" name="login_username" maxlength="25" />
<input type="password" name="login_password" id="id_login_password" /><br>
<button type="submit" class="btn btn-info">Login</button>
</form>
<h3> Sign Up <small>(It's free!)</small></h3>
<form action="/register/" method="POST" class="form-vertical" style="padding-top: 5px">
<input id="id_register_username" type="text" name="register_username" maxlength="25" />
<input type="text" name="register_email" id="id_register_email" />
<input type="password" name="register_password" id="id_register_password" />
<input type="password" name="register_password2" id="id_register_password2" /><br>
<button type="submit" class="btn">Submit</button>
</form>
Which renders to this in Chrome:
What can be causing this? And how can I fix it?
That's a really good question and I'm sorry to say I have no idea. Did
you try to register once and also login at least once? If so, that
"might" be what's causing it as browsers come complete with the
"autoremember" feature.
Assuming autofill is enabled (it is by default), the reason it autofills the rest is because chrome's autofill server works on regular expressions, not exact matches.
All the regular expressions used for the various fields can be found in autofill_regex_constants.cc.utf8.
From there you can see that the expression for email field is "e.?mail" and for username it is "user.?name|user.?id|nickname|maiden name|title|prefix|suffix"
It appears a similar question has been asked before:
What is the correct way to stop form input boxes auto-completing?
There is an autocomplete attribute you can use in form fields.
<input id="id_login_username" type="text" name="login_username" maxlength="25" autocomplete="off" />