The problem is that my angular code triggers an error on the form controls when I add a white space to the text input.I would like the regex to allow white spaces. I've tried several different regex patterns. I believe the one im currently using should be allow letters and whitespaces.
TypeScript
form = this.fb.group({
title: [,[Validators.required,Validators.pattern("[a-zA-Z\s]+")]],
author: [,[Validators.required,Validators.pattern('/^[a-zA-Z\s]*$/')]],
description: [,Validators.required],
date: [new Date]
})
HTML
<div class="form-group">
<label for="title"> Article Title </label>
<span
style="color: red;font-style: italic"
*ngIf="(mouseOverSubmit || form.controls.title?.touched)
&& form.controls.title?.errors?.required">
Required
</span>
<span
style = "color:red;font-style: italic"
*ngIf= "form.controls.title?.touched
&& form.controls.title?.errors?.pattern">
Only letters and numbers allowed
</span>
<input (ngModel)="title"
name="title"
formControlName="title"
class="form-control"
type="text"
id="title">
</div>
Here is validator example for you
\s Any Whitespace
\S Any Non-whitespace character
Use in this way Validators.pattern("^[a-zA-Z ]*$")
To allow only one space between two words use in this way
Validators.pattern("^[\w+ ?]*$")
Related
I need to apply a mask both to the Input (which has '.' and',' by default), and to the return (which is inside a tag 'p'). I didn't intend to use jQuery, so I would need another solution, I did some research on some libraries, but I didn't succeed.
Input:
<div class="form-group">
<label for="exampleInputEmail1">Valor Estimado</label>
<input [(ngModel)]="ticket.valorestimado" type="number" class="form-control" id="value"
aria-describedby="emailHelp" placeholder="Valor"/>
</div>
Return value:
<div>
<p class="fz-13">R$ {{ j.valorestimado }}</p>
</div
If you want to format the number 30000 as '30,000.00', you can use the number pipe.
<div>
<p class="fz-13">R$ {{ j.valorestimado | number:'1.2-2' }}</p>
</div>
Edit:
This will use the default locale of your app. See the number pipe documentation for more details: https://angular.io/api/common/DecimalPipe.
I chose the format 1.2-2 for at least 1 integer, and between 2 and 2 (i.e. exactly 2) fraction digits.
From the docs:
Decimal representation options, specified by a string in the following format:
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
With HTML and angular, how can I match input to 2 patterns in order to respectively generate 2 different inline error message? the "pattern" in input tag doesn't can't it.
for example, I want to check if the input start with 0.
If it starts with 0, generate a error message"the number cannot start with 0".
Then I want to check if it's 9 digits long. If it is not 9 digits long, generate a error message "the number should be 9 digits long".
The inline error is supposed to be generated as soon as a invalid input is typed in.
I've tried using formcontrol but it broke the whole page.
<form id="validationForm" #validationForm="ngForm" (ngSubmit)="onFormSubmit(validationForm)">
<div class="row">
<div id="u79" class="large-7 columns" data-label="businessNumber">
<label for="u79_input">
<abbr title="example">e.g.</abbr>{{'BUSINESS-NUMBER-PAGE.EXAMPLE' | translate}}
<input id="u79_input" type="text" value="" name="businessNumber" [(ngModel)] = "businessNumber" required minlength="9" maxlength="9" pattern="^\d{9}$" #uname="ngModel" (focus)="setErrors()" class="no-margin"/>
</label>
<!-- inline error -->
<div *ngIf="!hasErrors" id="error" data-label="inline error">
<div *ngIf="uname.errors?.required && validationForm.submitted && !isValidFormSubmitted">
<small class="error">{{'BUSINESS-NUMBER-PAGE.VAL-MESSAGE-REQ' | translate}}</small>
</div>
<div *ngIf="uname.errors?.pattern && !isValidFormSubmitted">
<small class="error">{{'BUSINESS-NUMBER-PAGE.VAL-MESSAGE-DIGIT' | translate}} </small>
</div>
</div>
</div>
</div>
I think you need just one regex pattern for validation and you can manipulate that with the length of characters in your input field. The regex to match 9 digit number not starting with 0 is
^[1-9]\d{8}$
You can see the validation and the appropriate error messages in the demo I created HERE
This shows 3 types of errors
When the field is empty
The number starts with zero
The number is not 9 digits long
While this info doesn't help resolve my issue, I'll let it be known I'm creating automation tests in Python using Selenium WebDriver.
I have an issue where I want to verify the existence of two identical text elements that appear to have identical XPATH addresses. As you can see from the XPATH of the web page below...
<div class="pagebox">
<h2>Database</h2>
Restrict access to group: <input id="database_group" name="database_group" value="postgres" type="text">
<br></br>
<h2>Sessions</h2>
User sessions time out after
<input id="session_timeout" name="session_timeout" maxlength="5" value="1200" type="text">
minutes.
<br></br>
<h2>HMI</h2>
<input id="use_large_header_text" name="use_large_header_text" type="checkbox">
Use large text in the header bar and link bar on HMI
<br></br>
<input id="display_tagging_button" name="display_tagging_button" checked="true" type="checkbox">
Display tagging button and information in HMI control dialog
<br></br>
<br></br>
<h2>Inactive Redirect</h2>
Auto redirect after user is inactive for
<input id="inactive_time" name="inactive_time" maxlength="4" placeholder="Min: 0 (Default) Max: 1440" size="25" value="0" type="text"></input>
minutes.
<span id="ieInactTime" style="font-style: italic"> Min: 0 (Default) Max: 1440</span>
<br></br>
Redirect Address:
<input id="inactive_page" name="inactive_page" placeholder="File Path e.g. /Home/" size="30" value="" type="text"><span id="ieInactPage" style="font-style: italic"> File Path e.g. /Home/</span>
<br></br>
...the phrase "minutes." shows up twice [line 8 and line 21], but it doesn't show up in a way where I can use the element's XPATH to locate which element I want to verify the existence of as I normally would using methods you'd find here, here, or here. Both text elements appear to have the same exact XPATH address:
//div[#class='pagebox']
I tried to distinguish between the two text elements using brackets to signify which text elements I'd like to verify...
e.g. //div[#class='pagebox']/[1] & //div[#class='pagebox']/[2]
...but that didn't work.
The closest I could find to distinguishing between the two of these text elements was to use the 'text()' feature of XPATH.
//div[#class='pagebox']/text()[contains(.,'minutes')][1]
//div[#class='pagebox']/text()[contains(.,'minutes')][2]
Is there any way to verify these two text elements using XPATH?
You can use JavaScriptExecutor to find text node inside the element div. See C# code below:
IWebElement e = driver.FindElement(By.ClassName("pagebox"));
string script = "var nodes = arguments[0].childNodes;" +
"var text = [];" +
"var count=0;" +
"for (var i = 0; i < nodes.length; i++) {" +
" if ((nodes[i].nodeType == Node.TEXT_NODE) && (nodes[i].textContent.trim()=='minutes.')) {" +
" text[count]= nodes[i].textContent.trim();" +
" count++;" +
" }" +
"}" +
"return text;";
Object obj = ((IJavaScriptExecutor)driver).ExecuteScript(script,e);
To distinguish between the two different text elements "minutes.", you need the following XPATH:
For the 1st "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][1]]
For the 2nd "minutes.": //div[#class='pagebox'][text()[contains(.,'minutes')][2]]
I want to add a NewClass value to the class attribute and modify the text of the span using find/replace functionality with a pair of regular expressions.
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customer' id='phone$1'>Business</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
I am trying to get the following result using after search/replace:
<span class='customer NewClass' id='phone$1'>Organization</span>
Also curious to know if a single find/replace operation can been used for both tasks?
Regex can do this, but be aware the using regex to change HTML can have a lot of edge cases that you may not have accounted for.
This regex101 example shows those three <span> elements changed to add NewClass and the contents to be changed to Organization.
Other technologies, however, would be safer. jQuery, for example, could replace them regardless of the order of the attributes:
$("span#phone$1").addClass("NewClass");
$("span#phone$1").text("Organization");
So just be careful with it, and you should be fine.
EDIT
According to comments on the OP, you want to only change the span containing ID phone$1, so the regex101 link has been updated to reflect this.
EDIT 2
Permalink was too long to fit into a comment, so adding the permalink here. Click on the "Content" tab at the bottom to see the replacement.
You can use a regex like this:
'.*?' id='phone\$1'>.*?<
With substitution string:
'customer' id='phone\$1'>Organization<
Working demo
Php code
$re = "/'.*?' id='phone\\$1'>.*?</";
$str = "<div>\n <span class='customer' id='phone\$0'>Home</span>\n<br/>\n <span class='customer' id='phone\$1'>Business</span>\n<br/>\n <span class='customer' id='phone\$2'>Mobile</span>\n</div>";
$subst = "'customerNewClass' id='phone\$1'>Organization<";
$result = preg_replace($re, $subst, $str);
Result
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customerNewClass' id='phone$1'>Organization</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
Since your tags include preg_match and preg_replace, I think you are using PHP.
Regex is generally not a good idea to manipulate HTML or XML. See RegEx match open tags except XHTML self-contained tags SO post.
In PHP, you can use DOMDocument and DOMXPath with //span[#id="phone$1"] xpath (get all span tags with id attribute vlaue equal to phone$1):
$html =<<<DATA
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customer' id='phone$1'>Business</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
DATA;
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xp = new DOMXPath($dom);
$sps = $xp->query('//span[#id="phone$1"]');
foreach ($sps as $sp) {
$sp->setAttribute('class', $sp->getAttribute('class') . ' NewClass');
$sp->nodeValue = 'Organization';
}
echo $dom->saveHTML();
See IDEONE demo
Result:
<div>
<span class="customer" id="phone$0">Home</span>
<br>
<span class="customer NewClass" id="phone$1">Organization</span>
<br>
<span class="customer" id="phone$2">Mobile</span>
</div>
I'm building an icon library where the user on the front end (submitting a form) can select an icon. I managed to get everything working as far as the selection process. Now, the final product will have over 400 icons, and i wanted to add a search (ajax, i guess) or autocomplete input where the user can type a couple of letters and it filter's out those icons.
They search will be filtering out some with a class that has the prefix "icon-", so the search term would be whatever is after that prefix. (i.e: icon-TWIITER, icon-FACEBOOK, etc).
I started on jsFiddle here: http://jsfiddle.net/yQMvh/28/
an example would be something like this :
http://anthonybush.com/projects/jquery_fast_live_filter/demo/
http://cheeaun.github.io/jquery.livefilter/
I'm trying to stay away from jQuery plugins and try and figure this out before i resort to that. I'm using wordpress as the backend of the website.
as soon as the user types, it's already sorting out the icons that pertain to the input value.
My HTML Markup:
<div class="iconDisplay">Display's selected icon</div>
<span id="selectedIcon" class="selected-icon" style="display:none"></span>
<button id="selectIconButton">Select Icon</button>
<div id="iconSelector" class="icon-list">
<div id="iconSearch">
<label for="icon-search">Search Icon: </label>
<input type="text" name="icon-search" value="">
</div>
<span class="icon-icon1"></span>
<span class="icon-icon2"></span>
<span class="icon-icon3"></span>
<span class="icon-icon4"></span>
<span class="icon-icon5"></span>
<span class="icon-icon6"></span>
<span class="icon-icon7"></span>
<span class="icon-icon8"></span>
</div>
JS:
var iconVal = $(".icon_field").val();
$('#selectedIcon').addClass(iconVal);
$("#selectIconButton").click(function () {
$("#iconSelector").fadeToggle();
});
$("#iconSelector span").click(function () {
selectIcon($(this));
});
function selectIcon(e) {
var selection = e.attr('class');
$(".icon_field").val(selection);
$("#iconSelector").hide();
$('#selectedIcon').removeClass();
$('#selectedIcon').addClass(selection).show();
return;
}
Made an update on your jsfiddle jsfiddle.net/yQMvh/30 Just enter the classname e.g. icon-icon1 and all icons without icon-icon1 gets hidden