email pattern validation without form tag in angular - angular11

How to email validation in angular 13 version. I have used a input field and submit button. If email validation failed then alert show.
<input type="email" [pattern]="emailPattern"
class="form-control adduser" placeholder="Email address"
[(ngModel)]="newEmailId">
<button type="button" class="commonnew-btn" (click)="addNewUser()">Add User</button>
Please find the ts file code
emailPattern = "^[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$";
addNewUser(){
}
How to write in this method. Please give me advice. Not using form group or form tag and reactive form. Only this condition.

Related

Replicating remote site "attack" by force sending specific form data to a page

I have this simple form:
<form method="post" id="theForm" action="user-password.asp">
<input type="hidden" name="what" value="process" />
<fieldset>
<div>
<label for="email">Username or Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="Username or Email" />
</div>
<div>
<button type="submit" class="btn btn-success top10">Submit</button>
</div>
</fieldset>
</form>
I have a script which emails me when my Classic ASP pages error - I use this to get all of the form contents:
For ix = 1 to Request.Form.Count
fieldName = Request.Form.Key(ix)
fieldValue = Request.Form.Item(ix)
bb = bb & fieldName & ": " & fieldValue & vbcrlf
Next
bb = newstr(bb)
For the above page, the page errored with:
A trappable error (C0000005) occurred in an external object. The script cannot continue running.
The form contents were like this:
form: email[$acunetix]: 1
what: process
In order to improve the error handling on the page, I'd like to be able to replicate loading the form with whatever it was that was used to generate the form input which made the page error - in the above example the form field name is not email but is email[$acunetix], which seems to have broken the page when it tries to process the form.
However, I don't know what was done to do that. The same IP address spent about 40 minutes forcing all kinds of stuff onto my pages which eventually crashed my site requiring a server reboot.
I realise that is down to me not writing robust enough code - but - I wondered how I can replicate sending the form data shown above to the page, as I'm stuck trying to work out how to do that.

Angular7 reactive form material time input validation

I have an angular 7 reactive form, input field in this form is to let user see and modify time and then using Save() save it back to our db, the problem is that user can enter any none sense numbers in this field which dose not make sense in terms of Time.(like hours should be 1-24, Minutes 1-60)
My question is how can I validate what user entered into time field and if its valid then let Save btn be active?
Note: Based on my testing even though its none sense time entry but while trying to save its not saving to db and its probably sql not letting that happen.
I googled but i could not find anything, also angular has only email Validators which u can put while defining form.
this is my form defination
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
and this is my HTML side
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I need some sort of validation when user punch in any input which dose not make sense in Time my Save btn should not be activated.
I appreciate your help and guideline.
You can use the HTML type="time" or if you want more you can simply use a library like: JsDaddy/ngx-mask found on Github. Use it like this:
HTML with MatInput:
<input formControlName="Time" matInput placeholder="Time" type="time" />
With ngx-mas:
<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />
Adding type="time" in all input time type use cases always help.

CSS - Get CheckBox Value

I'm following this article
https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
for a checkbox, but how do I set and get the check value?
As I need to a do a post back with the value.
<label class="container">Accept Offers?
<input type="checkbox" id="Offers" name="Offers"/>
span class="checkmark"></span>
</label>
change your code to this
<input type="checkbox" id="Offers" value="checkedValue" name="Offers"/>
If you see the Request.Form object or query-string (in case of HTTP GET submission) you will see the value, If this is not checked null will be seen or Request.Form will have not that key that belong to Checkbox.

Form Submission on Enter Press

I have a form in my ASP .NET project that takes the users input, and appends it to a URL to search a wiki. The form works perfectly when you enter in a search term, and click the 'search' button, however when you type into the input box and hit enter, the page refreshes and the box clears.
my html
<form>
<label id="sideBarLabel"> Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
Search Wiki
</form>
my js
function searchWiki(){
var siteQuery = $('#query-string').val();
window.location.href = "/dosearchsite.action?queryString=" + siteQuery;
}
Can anyone help ?
Your searchWiki() js method is only called when the evenement onclick is raised on your button, but not when your form is submitted.
There is several ways to achieve what you want:
Add a js method to catch the onsubmit event of your form:
$("form").on("submit", searchWiki());
Or add a tag on your form:
<form onsubmit="searchWiki()">
Or specify the action attribute on your form:
<form action="/dosearchsite.action">
Note that in ASP.NET, the ModelBinder will link your form inputs to your controller action parameters, using the name attribute of the inputs. That means that you should not specify them in the url yourself.
You should also declare your form using Html.BeginForm or Ajax.BeginForm if you want your form to be submitted by ajax.
#Html.BeginForm("ActionName", "ControllerName")
{
<label id="sideBarLabel">Services
<input type="text" placeholder="Search Wiki: e.g. E911" name="queryString" id="query-string" />
</label>
<input type="submit" class="button" value="Search Wiki"/>
}
This will call searchWiki when you press enter.
$('#query-string').keypress(function(event) {
if (event.keyCode == 13) {
searchWiki();
event.preventDefault();}});

Select a radio button functional test Symfony2

I'm making some functional tests with symfony2. I want to select a radio button in a basic form :
<form method="post" action="mylink">
<input id="position_51" type="radio" name="user_position" value="51">
<input id="position_52" type="radio" name="user_position" value="52">
<input id="position_54" type="radio" name="user_position" value="54">
<input id="position_57" type="radio" name="user_position" value="57">
<button id="bt_submit" type="submit">Submit</button>
</form>
So I select the form
$buttonFrom = $client->getCrawler()->selectButton('bt_submit');
$form = $buttonFrom->form();
Now, if I want to select radio with a specific ID, like "position_54" and tick it. How to do? In all examples I found, tick() seem to be used in the name attribute of the input... That not help me in a radio button case.
$form['user_position'] doesn't seem to be a array...
Thanks
As said in the symfony doc about testing, you can select an option or a radio this way :
$form['user_position']->select('51');
Here is the API for the ChoiceFormField.

Resources