I am new to React, so I am sorry if this is too basic. I intend to build a quiz, and users will answer Yes or No to different questions.
Problem is: the answer from the previous question shows in the following question. I would like each question to start fresh, with unchecked Yes/No answers. How can I do this? Maybe I misunderstood the way React handles radio-buttons. Any help will be appreciated.
Below a piece of my code:
const QUESTION_ANSWER_OPTIONS = [ 'Yes', 'No' ]
<IonRadioGroup>
<IonList>
<div>
<IonListHeader>
<IonToolbar>
<IonTitle size="large"><b> {question} </b></IonTitle>
</IonToolbar>
</IonListHeader>
</div>
<div>
{(types ?? QUESTION_ANSWER_OPTIONS.map(type => {
color = QUESTION_TYPE_COLOR[type]
return (
<IonItem key={type}>
<IonText color={color} style={{marginLeft: '15'}}><b>{type}</b></IonText>
<IonRadio
slot = "end"
color = {color}
value = {type}
name = "yes-no options"
// checked = {false} //Says attribute does not exist
// defaultChecked = {false} //Does not work
onClick={onChange ? () => onChange(type) : undefined}>
</IonRadio>
</IonItem>
)
}))}
</div>
</IonList>
</IonRadioGroup>`
I solved this issue by replacing IonRadio with input. Not sure if this is the best solution, but it works.
<input
type="radio"
slot="end"
color={color}
value = {type}
name="yes-no options"
checked = {myChecked}
onClick={onChange ? () => onChange(type) : undefined}>
</input>
Related
i have below select statement, I want to amend it to make the checkbox READ-ONLY.
how is it possible to do that pls??
SELECT emp_id,
emp_name,
emp_title,
APEX_ITEM.CHECKBOX(p_idx => 10, p_value => id , p_attributes => DECODE(status,'Y','checked="checked"', NULL)) status,
FROM emp_tbl WHERE emp_id = :P1_emp_id;
Depending on what exact behaviour you want, you could try either
1) adding to the attribute (p_attributes): disabled
or
2) adding to the attribute (p_attributes): onclick="return false;"
Hope this is of some help.
Include following change
p_attributes => DECODE(status,'Y','checked="checked" onclick="return false;"', 'onclick="return false;"')
Hope this will help you !
You can use 'readonly=readonly' property in check box.
Kindly check the case from Google as this is case sensitive.
Regards,
Nikita
When the input does not match the pattern specified by the pattern attribute, the browser displays "You must use this format:" in a tooltip on the field.
I cannot hide this tooltip message at all, can I? 'Cause even when I write
#Html.TextBoxFor(model => model.tbMyNumber, new { #pattern = "[0-9]{6,}", title="" })
it stills brings "You must use this format:" in the tooltip for this field.
How can I avoid this?
I don't think there is a way to do what you want without adding javascript. A simple alternative would be to verify with javascript (example below shown using jQuery) instead...
$('#myform').submit(function() {
if(!/^[0-9]{6,}$/.test($('#mytext').val())) {
return false;
}
});
This would prevent the form from submitting if the value doesn't match the pattern... without displaying the tooltip... just make sure you have an alternative so the user doesn't wonder why they can't submit the form.
I guess that is not what you expect as answer, but you can probably work the problem around with javascript
HTML:
* The string must be at least 6 digits
<br/>
<input type="text" onkeyup="isNumber(this)" onblur="lengthValidation(this)">
Javascript:
function isNumber(textbox)
{
textbox.value = textbox.value.replace(/[\D]+/, '');
}
function lengthValidation(textbox)
{
if (textbox.value.length < 6) {
document.getElementById("error").style.display = 'block';
} else {
document.getElementById("error").style.display = 'none';
}
}
Test it here: https://jsfiddle.net/mvxeous4/1/
1. Problem
This is the datepicker in my flask admin form, all the month and week names are in English, but I want customize the names also the start week number. like this question: How do I localize the jQuery UI Datepicker?. I searched a lot, but all I got is about how to customize date format in flask.
2. My code
class Receipt(db.Model):
delivery_time = db.Column(db.Date,index=True)
It's a date column can view and edit in admin form.
Is there any way to config the month、week names ? And how to make the start week number to Monday not Saturday, thanks a lot.
You could change locale globally in your templates, by adding:
<script>moment.locale(#YOURLOCALESTRING);</script>
This would guarantee that any other script loaded after this one that uses moment would use the global locale setting. You can find more details about setting locale here.
That code is not a good solution, but it can be helpful:
{% block tail_js %}
{{ super() }}
<script>
$(document).ready(function () {
var el = $('#your_element_id'); // change this selector
el.daterangepicker({
timePicker: true,
showDropdowns: true,
timePickerIncrement: 1,
timePicker12Hour: false,
separator: ' to ',
format: el.attr('data-date-format'),
locale: {
format: "MM/DD/YYYY",
separator: " - ",
applyLabel: "Выбрать",
cancelLabel: "Закрыть",
fromLabel: "От",
toLabel: "До",
customRangeLabel: "Custom",
weekLabel: "W",
daysOfWeek: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
monthNames: [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Октябрь", "Сентябрь", "Ноябрь", "Декабрь"],
firstDay: 1
},
});
});
</script>
{% endblock %}
P.S.
Need to add this code into your master.html
I find a quick way to fix this issue, but I know there are better ways to do this. just modify the code in path:lib/python2.7/site-packages/flask_admin/static/vendor/daterangepicker.js to below:
this.locale = {
applyLabel: 'Apply',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
// daysOfWeek: moment.weekdaysMin(),
daysOfWeek: ["日","一","二","三","四","五","六"],
// monthNames: moment.monthsShort(),
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月",],
// firstDay: moment.localeData()._week.dow
firstDay: 1
};
I'd like to validate the password before the form is submit using Regex, Id like to know what whats the equivalent regex for the following PasswordValidator settings:
UserManager.PasswordValidator = new PasswordValidator
{
RequiredLength = 6,
RequireNonLetterOrDigit = true,
RequireDigit = false,
RequireLowercase = true,
RequireUppercase = true,
};
im using the AngujarJS pattern validation.
Example:
<input type="password" class="form-control" name="inputPassword" ng-minlength="6" np-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*(_|[^\w])).+$/" ng-model="userData.Password" />
<p class="alert-danger" ng-show="userDetails.inputPassword.$error.pattern">The Password is invalid</p>
But it simply ignore it.
Thank you very much!
Update 1
with the help of accepted answer i come to the following regex ^(?=.[a-z])(?=.[A-Z])(?=.*(_|[^\w])).+$ and added the length validation as ng-minlength="6" for some reason the pattern validation doesnt work on IE9 where the validation prevent the user save, rendering it totally useless.
Update 2
By suggested by stribizhev, changing the any symbol regex to (?=.*[\W_]) fixed IE9 validation, so it works 100% in IE9, final code is
<input type="password" class="form-control" name="inputPassword" ng-minlength="6" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).+$/" ng-model="userData.Password" />
<p class="alert-danger" ng-show="userDetails.inputPassword.$error.pattern || userDetails.inputPassword.$error.minlength">The Password is invalid</p>
thank you all very much
^(?=.*[!##$&*])(?=.*[a-z])(?=.*[A-Z]).{6,}$
I found that answer on SO which will give you hint how to construct your own regex https://stackoverflow.com/a/5142164/2892208
I am trying to create a Zend_Controller_Router_Route_Regex route to process URLs in the following form:
search?q=chicken/page=2 where the first regex subpattern would be chicken and second one would be 2. As for the second part where page=2, I want to make it optional if it is the first page, that is page=1. So another url such as search?q=chicken would also be valid and is equivalent to search?q=chicken/page=1.
Here is my attempt albeit without any success, but to give you a better picture of what I am trying to do.
$route = new Zend_Controller_Router_Route_Regex(
'search\?q=([a-zA-Z0-9]+)(?:/page=(\d+))',
array(
'page'=> '1',
'module' => 'default',
'controller' => 'search',
'action' => 'index' ),
array( 1 => 'query', 2 => 'page' ),
'search?=%s/page=%d');
$router->addRoute('search', $route);
The problem here is I cant compose the correct regex.
Thanks in advance.
EDIT #1
The correct regex, as pointed out by MA4, is 'search\?q=([a-zA-Z0-9]+)(?:/page=(\d+))?'
The real problem is pointed by Darryl. Here is a little bit more info to put things into perspective.
My search text box and button
<form action="/search" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
Every time I press the search button, I get the search?q=[text] request. How do I force it to go through the regex match route?
Here is what i want to do, however the code does not work
if($this->getRequest()->getParam('query')){
// redirect success
} else {
$url = "search?q=" . $this->_getParam('q');
$this->_redirect(route('search'), array('code' => 301 ));
}
/search?q=chicken/page=2 is not parsable by Zend Frameworks' router. The router will only see /search.
The router relies on the Path Info provided by the server and anything after the ? is the query string.
You would need to use a path such as this:
/search/[word] (default page 1)
/search/[word]/[page]
In which case your regex would become much simpler.
make the second part optionnal by adding a ? after it:
search\?q=([a-zA-Z0-9]+)(?:/page=(\d+))?