Validate user entered Phone number with certain length using Redux Form and Input Mask - redux-form

Even the user has entered only 1 number, the validation is not working, I think the problem that occurs with maskChar value of Inputmask.
<Field
component={NumberField}
name="phone"
mask="+1 (999) 999-9999"
placeholder="Phone"
/>```
```
<InputMask
mask={mask}
maskChar={maskChar}
{...input}
value={toUpper && input.value.trim()}
label={label}
onFocus={() => isActive(true)}
onBlur={() => isActive(false)}
placeholder={active ? '' : thePlaceholder}
aria-label={label}
type={type}
required={required}
/>
`
``

If you have no problem with new NPM package this one looks good:
https://www.npmjs.com/package/validator
or this one:
https://catamphetamine.github.io/react-phone-number-input/
https://github.com/catamphetamine/react-phone-number-input
or you can check this SO answer

Related

I can't get option value without using xpath in Cabybara

I'll try to explain again. I have to get the value Arizone but I'm only getting it via xpath. The element was mapped with: element :select_cad_state, "#uniform-id_state". I don't want to use xpath to get the value Arkansas, I want to use something like: select_state.send_keys(DATA[:cad_user][:_state]) ???..etc..etc..
I want to get the arizona value from the users.yml file and pass it as an argument in the front.
############ code page #####################
<div class="selector" id="uniform-id_state" style="width: 269px;"><span style="width: 259px; user-select: none;">Florida</span><select name="id_state" id="id_state" class="form-control" style="">
<option value="">-</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option></div>
################### my PageObjects #########################
class ScreenCadastro < SitePrism::Page
set_url 'http://automationpractice.com/index.php?controller=authentication&back=my-account'
element :input_cad_company, "#company"
element :input_cad_address, "#address1"
element :input_cad_city, "#city"
element :select_state, "#uniform-id_state" (my problem is here)
################ yaml file ##############
:cad_user:
:_password: 457226
:_company: SQATest
:_address: International Drive 678
:_city: Bradenton
:_state: Arizona
################## my env file ###################
DADOS = YAML.load(File.open(File.join(File.dirname(__FILE__) + "/massa/users.yml")))
input_cad_company.send_keys(DADOS[:cad_user][:_company])
input_cad_address.send_keys(DADOS[:cad_user][:_address])
input_cad_city.send_keys(DADOS[:cad_user][:_city])
find(:xpath,'/html/body/div/div[2]/div/div[3]/div/div/form/div[2]/p[7]/div/select/option[3]').click
You are asking about option value, but from all your code it looks like you actually want to select based on the string contents of the option element (not the value). As I posted in my answer to your previous question this should just be
select_state.select(DADOS[:cad_user][:_state])
If that is not working for you please provide the error message it's giving you.

Laravel overwrite value in request

I trouble to overwrite existing request value.
Below example info is my input array and product is my input array key.
e.g,
HTML
<input type="text" name="info[product]" value="10" />
PHP
echo request('info.product');
OUTPUT
10
Edit
print_r(request()->all());
Array
(
[info] => Array
(
[product] => 10
)
[_method] => PUT
[info.product] => 20
)
Question : But now I am required to overwrite this default 10 value to 20 using laravel.
Use the merge() method:
$array['input']['product'] = 20;
request()->merge($array);
Or do this when you'll need the data from request:
$data = request()->all();
$data['input']['product'] = 20;
Try this:
Input::merge(['input.product' => 'new value']);
and don't forget to import Input facade at the top.( use Input;)

How to get Error message when using pattern in angular 2

I have tried this code but it is not working.
<div>
<span *ngIf="!usernameRef.errors?.required">Amount</span>
<span *ngIf="!usernameRef.errors?.required">Cover amount required.</span>
<span *ngIf="usernameRef.errors?.pattern">Cover amount invalid.</span>
<input type="number" name="Amount" class="form-control" data-field="validate" placeholder="50 000" [(ngModel)]="Amount"
required #usernameRef="ngModel" pattern="[0-9]*" />
</div>
Your regex is also valid from two reasons:
Your input type is a number. You can't type letters.
[0-9]* - the asterisk means - 0 or more occurrences.

How to set a label to a variable in Watir

I am trying to set some html contents to a variable so i can perform some if statements. But I get this instead:
Fail #<Watir::Browser:0x00000004440b98>
It looks like my variable isnt set to text i want to set.
my html:
<label class="col-lg-12 control-label ng-binding" ng-show="productionReport.Status == 2 && productionReport.ReadyForPublishDate" style="">Text 1</label>
My Watir code:
msgText = 'Text 1'
msgText2 = #browser.label(:xpath, '/html/body/div[1]/div[3]/div/div/div/div/div/form/div/div/div[2]/label')
if (msgText == msgText2)
puts 'Pass' "#{msgText2}"
else
puts 'Fail' "#{msgText2}"
end
The problem is that msgText2 (ie #browser.label) is being set to a Watir::Label element rather than its text.
To get the text of the label, you need to call the text method. For example:
msgText2_element = #browser.label(:xpath, '/html/body/div[1]/div[3]/div/div/div/div/div/form/div/div/div[2]/label')
msgText2 = msgText2_element.text

Unable to type into number input with FuncUnit

I'm using FuncUnit with Jasmine to test my web application, and one issue I've run into consistently relates to typing into an input of type number.
<input type="number" min="0.01" step="0.01" pattern="[0-9]+([\.|,][0-9]+)?" class="form-control m-wrap m-ctrl-large" placeholder="10" onkeypress=" return isDecimalKey(event); ">
The isDecimalKey method basically checks typecodes to make sure that the user is entering a number or decimal point:
function isDecimalKey(e) {
var charCode = (e.which) ? e.which : event.keyCode;
if (charCode !== 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;
else
return true;
}
When typing into the input manually, I'm able to highlight the current value with Ctrl+A, delete it with either backspace or the delete key, and enter a new value. However, when trying to do the same with FuncUnit, I get the following error:
Uncaught InvalidStateError: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection.
I've tried the following methods of insertion:
F('input').visible().click().type('[ctrl]a[ctrl-up][delete] 6');
F('input').visible().click().type('[\b][\b] 6');
F('input').visible().click().type('6');
F('input').visible().dblclick().type('6');
So far, none of the above has worked. What is the best way for me to go about manipulating this input's value? Thanks!

Resources