ion-input type text should only accept alphabets without using the form Builder.
<ion-item class="myitem">
<ion-input type="text" value="" placeholder="Full Name*" [(ngModel)]="fullname" maxlength="25"></ion-input>
</ion-item >
You can do it with html adding the pattern attribute to your input.
Alphabets and blankspace:
pattern="/^[a-zA-Z\s]*$/"
Alphabets no blankspace:
pattern="/^[a-zA-Z]*$/"
Alternate
[pattern]="'^[a-zA-Z \-\']$'"
alternately you can use,
<ion-input class=" " (keypress)="onKeyPress($event)"> </ion-input>
and
onKeyPress(event) {
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 97 && event.keyCode <= 122) || event.keyCode == 32 || event.keyCode == 46) {
return true
}
else {
return false
}
}
it will work for me
Related
I'm trying to make ion-range with input. First, when I using ion-range it getting the right value(this.selectedNominal) but when I'm trying using ion-input to change the value it doesn't changing. It still using first ion-range value.
HTML
<ion-list-header>
Nominals
</ion-list-header>
<ion-item *ngFor="let b of listNom2">
<ion-range min="{{b.min}}" max="{{b.max}}" step="{{b.step}}" [(ngModel)]="nominal2" (ngModelChange)="optionsNominal(nominal2)" color="secondary">
<ion-label range-left style="font-weight: bolder;">{{ b.min | number:0 }}</ion-label>
<ion-label range-right style="font-weight: bolder;">{{ b.max | number:0 }}</ion-label>
</ion-range>
</ion-item>
<div style="text-align: center;margin-left:25%;margin-right:25%;padding-bottom:10px;">
<ion-input maxlength="8" type="tel" [pattern]="[0-9]" (ionChange)="setValue2(nominal2)" style="border:1px solid #FF9900;border-radius:5px;" [(ngModel)]="nominal2" (ionChange)="optionsNominal(nominal2)">Rp.{{ nominal | number:0 }}</ion-input>
</div>
TS
setValue2(nominal2) {
if(nominal2 == null || nominal2 == undefined || nominal2 == '') {
this.nominal2 = 0
} else {
this.nominal2 = parseInt(nominal2);
}
if (this.nominal2 > 50000000) {
this.nominal2 = 50000000;
} else if (this.nominal2 < 3000000) {
this.nominal2 = 3000000;
}
}
optionsNominal(value: any) {
if (value == NaN || value == null || value == undefined || value == '') {
this.selectedNominal = 0;
} else {
this.selectedNominal = value;
}
}
I cannot use requiredattribute as the ion-input (email) field is conditionally required. Also I do not want to check everytime the form is submitted to fire invalid email unless and until the email (ion-input) has some text input and it is not a valid email.
This is what I've done so far:
<ion-item >
<ion-label stacked>{{'email' | translate}}</ion-label>
<ion-input type="email" [ngClass]="{ 'is-invalid':(AddContactForm.submitted && email.invalid && addContactData.phone_type=='Email') || (AddContactForm.submitted && email.length && email.invalid)}" email name="email" [required]="addContactData.phone_type=='Email'" [(ngModel)]="addContactData.email" value="" class="nui-text-field__input"
#email="ngModel"></ion-input>
</ion-item>
<span class="nui-text-field__sub-label error" *ngIf="(AddContactForm.submitted && email.invalid && addContactData.phone_type=='Email') || (AddContactForm.submitted && email.length && email.invalid)">{{'email_required_validation' | translate}}</span>
I would set up a model and check that.
<ion-input [(ngModel)]="this.thing"></ion-input>
Then check if this.thing is valid :)
I am trying to create an input where you can write a number with decimals.
I don't know how to make it so that a user cant insert two points characters.
Example
I want to prevent the user from writing 0.123445.5, only with one point: 0.123445
I have tried with ionic input properties like step="0.01" but I can't solve it.
EDIT: (SOLVED)
Instead using number, use type="string" and create a method to check number of points of the number.
Before:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="number" step="0.01" [(ngModel)]="CRP" (ngModelChange)="checkRules();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
Now:
<ion-item">
<ion-label stacked>CRP</ion-label>
<ion-input type="text" [(ngModel)]="CRP" (ngModelChange)="checkCRPkDecimals();"
onkeypress="return event.charCode >= 46 && event.charCode <= 57"> </ion-input>
</ion-item>
checkCRPkDecimals() {
if (isNaN(parseFloat(this.CRP))) return;
let str:Array<string> = this.CRP.split(".");
if (str.length > 2) {
this.CRP = "";
return;
} else {
this.checkRules();
}
}
I am using Angular UI Bootstrap datepicker directive in my project. I have this specific need like I need to enable only 5 days from current day. In case of weekend, I need to disable them and enable the remaining days. for eg, If current day in Friday, I need to enable fri, mon, tue, web, thurs. I am using dateDisabled property to achieve this. Problem is all past month dates are also getting enabled. Also I think the solution I came up is not elegant. Below is my markup and code. Kindly help me. Thank you in advance.
<input show-weeks="false" ng-click="vm.openDate()" name="quotedate" type="text" class="form-control" ng-model-options="{timezone:'UTC'}" uib-datepicker-popup="dd/MM/yyyy" ng-model="vm.quote.date" is-open="vm.quotedate.opened" datepicker-options="vm.dateOptions" required close-text="Close" readonly="true"/>
vm.dateOptions = {
dateDisabled: disabled,
minDate: today
};
function disabled(data) {
var date = data.date,
mode = data.mode;
if (today.getDay() === 0 || today.getDay() === 6) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 5 );
}else if (today.getDay() === 1) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 4 );
}else {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6 || date.getDate() > today.getDate() + 6 );
}
}
What you are looking for are the min-date, max-date, and date-disabled attributes, as described in the docs. The date-disabled function in this example is pulled directly from the docs, and in order to confine the available date range, simply set the min-date attribute to the current datetime:
vm.dt = new Date();
vm.minDate = angular.copy(vm.dt);
...and the max-date to five days from now:
var fiveDaysFromNow = angular.copy(vm.dt);
fiveDaysFromNow.setDate(fiveDaysFromNow.getDate() + 5);
vm.maxDate = fiveDaysFromNow;
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
var vm = this;
function today() {
vm.dt = new Date();
}
today();
vm.opened = false;
vm.openDatePopup = function() {
vm.opened = true;
};
// Disable weekend selection
vm.disabled = function(date, mode) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
};
vm.minDate = angular.copy(vm.dt);
var fiveWeekdaysFromNow = angular.copy(vm.dt);
fiveWeekdaysFromNow.setDate(fiveWeekdaysFromNow.getDate() + 7);
vm.maxDate = fiveWeekdaysFromNow;
vm.dateOptions = {
formatYear: 'yy',
startingDay: 0
};
vm.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
vm.format = vm.formats[0];
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerDemoCtrl as demo">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<p class="input-group">
<input type="text"
class="form-control"
uib-datepicker-popup="{{demo.format}}"
ng-model="demo.dt"
show-weeks="false"
is-open="demo.opened"
min-date="demo.minDate"
max-date="demo.maxDate"
datepicker-options="demo.dateOptions"
date-disabled="demo.disabled(date, mode)"
ng-required="true"
close-text="Close"/>
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="demo.openDatePopup()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>
Hope this helps!
Hi I am developing a website starting from the template Metronic (HTML Template Boiler) that uses Bootstrap.
People say that this code have risk SQL injection.
Can you tell me where is code section bad and how can I fix it?
<div class="container main">
<div class="main_pad">
<?php
if(isset($_GET['ID'])) {
$arrayResult = array();
$query = $dbConnect->query("
SELECT
designers.ID AS ID_designer,
designers.nome AS nome_designer,
designers.immagine AS immagine_designer,
designers.testo_IT AS testo_IT_designer,
designers.testo_EN AS testo_EN_designer,
designers.website AS website_designer,
designers.ID_linea AS ID_linea_designer
FROM
designers
WHERE
ID = '" . $_GET['ID'] . "'
");
$result = $dbConnect->extractObject($query);
if(count($result)>0) {
for($i=0;$i<count($result);$i++) {
$fileParts = pathinfo($result[$i]->immagine_designer);
$basename = substr($fileParts['filename'], 0, -4);
$arrayResult = array(
$result[$i]->ID_designer, // 0
utf8_encode($result[$i]->nome_designer), // 1
$basename . '_640.' . $fileParts['extension'], // 2
utf8_encode($result[$i]->testo_IT_designer), // 3
utf8_encode($result[$i]->testo_EN_designer), // 4
$result[$i]->website_designer, // 5
$result[$i]->ID_linea_designer // 6
);
}
}
?>
<div class="col-lg-6 designer">
<img src="images/left-arrow.png">
<h1><?php echo $arrayResult[1]; ?></h1>
<ul class="top-nav nav-tabs" id="specs" role="tablist">
<li class="active">
<?php echo $_SESSION['langPref']=='ENG' ? "BIO" : 'BIOGRAFIA'; ?>
</li>
<li>
<?php echo $_SESSION['langPref']=='ENG' ? "PRODUCTS" : 'PRODOTTI'; ?>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="bio">
<div class="row">
<div class="col-lg-12">
<p style="margin-top: 20px;">
<?php
switch($_SESSION['langPref']){
default :
case 'ENG' :
echo $arrayResult[4];
break;
case 'IT' :
echo $arrayResult[3];
break;
}
?>
</p>
</div>
</div>
</div>
<div class="tab-pane" id="products">
<div class="row">
<div class="col-lg-12">
<?php
$arrayLinesList = array();
foreach(explode(',', $arrayResult[6]) as $lines => $line) {
$arrayLinesList[] = '"' . $line . '",';
}
$query = $dbConnect->query("
SELECT
*
FROM
prodotti
WHERE
prodotti.ID_linea IN (" . substr(implode('', $arrayLinesList), 0, -1) . ")
");
$result = $dbConnect->extractObject($query);
if(count($result)>0) {
echo '<ul style="margin-top: 20px;">';
for($i=0;$i<count($result);$i++) {
$co = '';
if($result[$i]->ID == 58){
$co = '(Claudio Dondoli)';
}elseif($result[$i]->ID == 53 && $_GET['ID'] == 19 || $result[$i]->ID == 40 && $_GET['ID'] == 19 || $result[$i]->ID == 41 && $_GET['ID'] == 19 || $result[$i]->ID == 62 && $_GET['ID'] == 19 || $result[$i]->ID == 63 && $_GET['ID'] == 19) {
$co = '(with Gianfranco Gualtierotti)';
}elseif($result[$i]->ID == 53 && $_GET['ID'] == 7 || $result[$i]->ID == 40 && $_GET['ID'] == 7 || $result[$i]->ID == 41 && $_GET['ID'] == 7 || $result[$i]->ID == 62 && $_GET['ID'] == 7 || $result[$i]->ID == 63 && $_GET['ID'] == 7) {
$co = '(with Giancarlo Vegni)';
}elseif($result[$i]->ID == 26 && $_GET['ID'] == 10 || $result[$i]->ID == 27 && $_GET['ID'] == 10 || $result[$i]->ID == 28 && $_GET['ID'] == 10 || $result[$i]->ID == 29 && $_GET['ID'] == 10 || $result[$i]->ID == 61 && $_GET['ID'] == 10) {
$co = '(with Patricia Urquiola)';
}elseif($result[$i]->ID == 26 && $_GET['ID'] == 18 || $result[$i]->ID == 27 && $_GET['ID'] == 18 || $result[$i]->ID == 28 && $_GET['ID'] == 18 || $result[$i]->ID == 29 && $_GET['ID'] == 18 || $result[$i]->ID == 61 && $_GET['ID'] == 18) {
$co = '(with Sung Sook Kim)';
}
echo '<li>' . utf8_encode($arrayLines[$result[$i]->ID_linea][0]) .' '. $result[$i]->nome .'  ' . ($co) .'</li>';
}
echo '</ul>';
} else {
echo '<p style="margin-top: 20px;">This designer has no products listed here!</p>';
}
?>
</div>
</div>
</div>
</div>
</div><!-- /.left_cont -->
<div class="col-lg-6 right_cont">
<img src="admin/assets/admin/layout/img/designers/<?php echo $arrayResult[2]; ?>" class="img-responsive" />
</div><!-- /.right_cont -->
<?php
}
?>
possible injection in
WHERE ID = '" . $_GET['ID'] . "'
for example if $_GET['ID'] = "' or 1 = 1"
solution: use parametrized queries.
One problem (not read all the code) is building sql statements directly from user input (for example get or post data)
In your code you have
WHERE ID = '" . $_GET['ID'] . "'
You should use prepared statements - read How can I prevent SQL injection in PHP?
if ur using PDO then be sure to use:
WHERE `id`=:id
and then use like:
$stmnt = $dbConnect->prepare($sql);
$stmnt->execute(Array(":id"=>$_GET['id']));
also if you want to protect from higher levels search up the magic quotes liberary, that should help you a bit ;)