I'm having issues with this paper-input that validates phone numbers.
I want to add the country code as prefix, but it doesn't show.
<paper-input value="{{cellno}}" style="color:white;" label="Ingrese su número de celular" auto-validate pattern="(?:11|[2368]\d)(?:(?=\d{0,2}15)\d{2})??\d{8}$" error-message="Ingrese un número de celular válido" invalid={{invalidCellno}}>
<div slot="prefix" style="color:white;">+54</div>
</paper-input>
Thanks!
Because you use a div. try with span.
try with
<paper-input value="{{cellno}}" style="color:white;" label="Ingrese su número de celular" auto-validate pattern="(?:11|[2368]\d)(?:(?=\d{0,2}15)\d{2})??\d{8}$" error-message="Ingrese un número de celular válido" invalid={{invalidCellno}}>
<span slot="prefix" style="color:#8e8e8e;">+54</span>
</paper-input>
Related
I am trying to save multiple checkbox values, and its value attributes contain special characters, such as "ç," "ã," and so on. But when I get into my controller and return the $request object, I see that the special characters are not being formatted in utf-8. How can I solve this, please?
HTML
<div class="form-check">
<input class="form-check-input" name="servicos[]" type="checkbox"
value="Substituição de piso nos banheiros" id="servicos1">
<label class="form-check-label" for="flexRadioDefault1">
Substituição de piso nos banheiros
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="servicos[]" type="checkbox"
value="Instalação de piso na sala e dormitórios" id="servicos2">
<label class="form-check-label" for="flexRadioDefault1">
Instalação de piso na sala e dormitórios
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="servicos[]" type="checkbox"
value="Substituição de piso na cozinha" id="servicos3">
<label class="form-check-label" for="flexRadioDefault1">
Substituição de piso na cozinha
</label>
</div>
Controller
return $request->servicos;
Is there a way to validate the numerical value of input field using template driven forms in Angular 11?
To give a bit of context, I'm building a memory card game using Angular 11 and I'd like to make sure that the player can't select a maxFlipCount that is inferior to the number of cards. I have been struggling to make this work using the min attribute on an input tag. Maybe there's another that I don't know of that doesn't use the min attribute.
How could I achieve this?
I'm trying to apply this validation to the last input tag, before the submit button in my template code. This is what I have so far:
<form #gameOptionsForm="ngForm" (ngSubmit)="startGame()" novalidate>
<!-- mode de jeu -->
<div class="field">
<label class="label">Mode de jeu</label>
<div class="control">
<div class="select" [class.is-danger]="
gameMode.invalid && (gameMode.dirty || gameMode.touched)
">
<select name="gameMode" [(ngModel)]="optionsForm.gameMode" #gameMode="ngModel" required>
<option value="1">1 joueur</option>
<option value="2">2 joueurs</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gameMode.invalid && (gameMode.dirty || gameMode.touched)">
Vous devez choisir un mode jeu
</p>
</div>
<!-- nom du premier joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 1 || optionsForm.gameMode == 2">
<label class="label">Nom du joueur 1</label>
<div class="control">
<input [class.is-danger]="
player1.invalid && (player1.dirty || player1.touched)
" class="input" type="text" name="player1" placeholder="Joueur 1" #player1="ngModel" [(ngModel)]="optionsForm.player1" required />
</div>
<p class="help is-danger" *ngIf="player1.invalid && (player1.dirty || player1.touched)">
Veuillez entrer un nom pour le joueur 1
</p>
</div>
<!-- nom du deuxieme joueur -->
<div class="field" *ngIf="optionsForm.gameMode == 2">
<label class="label">Nom du joueur 2</label>
<div class="control">
<input [class.is-danger]="
player2.invalid && (player2.dirty || player2.touched)
" class="input" type="text" name="player2" placeholder="Joueur 2" #player2="ngModel" [(ngModel)]="optionsForm.player2" required />
</div>
<p class="help is-danger" *ngIf="player2.invalid && (player2.dirty || player2.touched)">
Veuillez entrer un nom pour le joueur 2
</p>
</div>
<!-- taille de la grille -->
<div class="field">
<label class="label">Nombre de cartes</label>
<div class="control">
<div class="select" [class.is-danger]="
gridSize.invalid && (gridSize.dirty || gridSize.touched)
">
<select name="gridSize" [(ngModel)]="optionsForm.gridSize" #gridSize="ngModel" required>
<option value="4">4</option>
<option value="16">16</option>
<option value="36">36</option>
</select>
</div>
</div>
<p class="help is-danger" *ngIf="gridSize.invalid && (gridSize.dirty || gridSize.touched)">
Vous devez choisir un nombre de cartes
</p>
</div>
<!-- nombre maximal de coups -->
<div class="field">
<label class="label">Nombre maximal de coups</label>
<div class="control">
<input [class.is-danger]="
maxFlipCount.invalid && (maxFlipCount.dirty || maxFlipCount.touched)
" class="input" type="number" name="maxFlipCount" #maxFlipCount="ngModel" [(ngModel)]="optionsForm.maxFlipCount" required min="{{ optionsForm.gridSize }}" />
</div>
<p class="help is-danger" *ngIf="
maxFlipCount.invalid &&
(maxFlipCount.dirty || maxFlipCount.touched) &&
maxFlipCount.errors.required
">
Veuillez entrer un nombre maximal de coups
</p>
<p class="help is-danger" *ngIf="maxFlipCount.errors?.min">
Veuillez entrer un nombre supérieur ou égal à {{ optionsForm.gridSize }}
</p>
</div>
<button type="submit" [disabled]="!gameOptionsForm.form.valid">
Commencer
</button>
</form>
The min attribute does actually do it's job when I use the little arrows (automatically put there by the browser) on the side to increase/decrease the value, however the problem is when I type a value in manually, the field value can be whatever I want and it will not appear as being invalid.
Thank you for reading through this and suggesting any ideas.
I ended up finding the answer to my question. So, I used a custom directive to check that the value of the field was what I wanted.
This article explains it quite well: https://www.digitalocean.com/community/tutorials/angular-custom-validation
<html>
<head>
<title>The Moon</title>
<link rel="icon" type = "img/gif" href = "moonanimation.gif">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Megrim|Tangerine" rel="stylesheet">
<!--
<link rel="stylesheet" type="text/css" href="style.css"> -->
</head>
<body>
<div class="navigation">
<ul>
<li id="logo"><img src="moonanimation.gif"/></li>
<li>France</li>
<li>K-Pop</li>
<li>Spain and Latin America</li>
<li>Bollywood</li>
</ul>
</div>
<form method="get" action="france.py">
<center>
<audio controls>
Amine - Senorita<source src="Amine - Senorita.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Amir - Jai cherchete<source src="Amir - Jai cherchete.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Indila - Derniere Danse<source src="Indila - Derniere Danse.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Indila- Tourner Dans Le Vide<source src="Indila- Tourner Dans Le Vide.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Kendji Girac - Cool<source src="Kendji Girac - Cool.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Kendji Girac- Andalouse<source src="Kendji Girac- Andalouse.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Kendji Girac- Color Gitano<source src="Kendji Girac- Color Gitano.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Kendji Girac- Conmigo<source src="Kendji Girac- Conmigo.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Khaled - Cest la vie<source src="Khaled - Cest la vie.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->KIDS UNITED- On Ecrit Sur Les Murs<source src="KIDS UNITED- On Ecrit Sur Les Murs.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Louane - Avenir<source src="Louane - Avenir.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Louane- Maman<source src="Louane- Maman.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->MAGIC SYSTEM- Magic In The Air Feat. Chawki<source src="MAGIC SYSTEM- Magic In The Air Feat. Chawki.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Nekfeu - On Verra<source src="Nekfeu - On Verra.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Noir Desir- Le Vent Nous Portera<source src="Noir Desir- Le Vent Nous Portera.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Soprano- Cosmo<source src="Soprano- Cosmo.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Soprano- Millionnaire<source src="Soprano- Millionnaire.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Stromae - Carmen<source src="Stromae - Carmen.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Stromae - ta fete<source src="Stromae - ta fete.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Stromae- Formidable<source src="Stromae- Formidable.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Stromae- Papaoutai<source src="Stromae- Papaoutai.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Stromae- Quand cest <source src="Stromae- Quand cest .mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Stromae- Tous Les Memes<source src="Stromae- Tous Les Memes.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Zaho- Tourner la page<source src="Zaho- Tourner la page.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->Zaz - Je Veux<source src="Zaz - Je Veux.mp3" type="audio/mpeg"><input type="checkbox" name="addsong" value="yes"><br><!--
-->
Your browser does not support the audio element. Please try a different browser or a newer version.
</audio>
<input type="submit" name="the-button" value="sync">
</center>
</form>
</body>
</html>
I am creating a website using python and html. This website will feature multiple songs that users can select through a form and add to their playlist. I have to create html pages that link to a python page so that once users select different songs on my page, their choices can be saved and displayed using python.
However, I am not sure how I can do this. I created html code with form elements, but when viewed online, only 1/26 songs are shown. Also, no checkbox is shown. How do I combine audio files and form elements so that in the browser, a user may see a check box located next to a song name and an audio tool to listen?
Also, how can I write python code to process the selections and add to a playlist? Should I write choices to a text document through python?
Thank you in advance!
This is what I have so far (I created this through python):
I've got a site with a form.
The value of the input should be a specific value. This works:
$('button').on('click', function () {
var val1 = $("#teller").val();
var val2 = $("#noemer").val();
if (val1 == 3 && val2 == 10)
alert("Goed gedaan! je hebt de vraag goed beantwoord. Je kunt verder met je avontuur!");
else
alert("Helaas... Dit is niet het goede antwoord. Probeer het nog eens!");
});
But when I submit the page will refresh, change my url and refresh the page so the page starts at the beginning again... This is the site: http://stilld.nl/brrreuk/
I don't want this to happen. I want the code to check if the value's given are correct, but then I want the site to stay where it is.
Hope you can help.
this is the html:
<form id="form_1">
<fieldset>
<p>
<input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="teller"></label>
</p>
<hr noshade size=3>
<p>
<input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="noemer"></label>
</p>
<p>
<button class="submit" type="submit" value="controleer">Controleer</button>
</p>
</fieldset>
</form>
Here you go. Simply change the submit to a button.
The JavaScript:
$('button').on('click', function(){
var val1 = $("#teller").val();
var val2 = $("#noemer").val();
if(val1 == 3 && val2 == 10)
alert("Goed gedaan! je hebt de vraag goed beantwoord. Je kunt verder met je avontuur!");
else
alert("Helaas... Dit is niet het goede antwoord. Probeer het nog eens!");
});
And the HTML
<p>
<input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="teller"> </label>
</p>
<hr noshade size=3>
<p>
<input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="noemer"> </label>
</p>
<p>
<button type="button" value="controleer"> Controleer </button>
</p>
List to the form's submit event instead of the button's click event:
$('form').on('submit', function(e) {
e.preventDefault();
// do stuff
// $(this).trigger('submit') if everything's ok
});
NOTE: The e.preventDefault(); line is important!
I have a form that contains radio groups and checkboxe groups as well, each checkbox group / radio group has a unique name.
In my Servlet I tried to get all checked values for those radio groups and checkbox groups.
PrintWriter out = response.getWriter();
Enumeration<String> requestParameters = request.getParameterNames();
while (requestParameters.hasMoreElements()) {
String paramName = (String) requestParameters.nextElement();
out.println("Request Paramter Name: " + paramName
+ ", Value - " + request.getParameter(paramName));
}
When I select multiple checkboxs in a checkbox group I only get one value.
For example, I have this checkbox group :
<ul class="data-list-2">
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Mise en page d’un texte" type="checkbox">
</div>
<label>Mise en page d’un texte</label>
</li>
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Compilation d’un texte" type="checkbox">
</div>
<label>Compilation d’un texte</label>
</li>
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Présentation d’un texte sous forme de diaporama" type="checkbox">
</div>
<label>Présentation d’un texte sous forme de diaporama</label>
</li>
<li>
<div class="icheckbox_square-aero">
<input style="position: absolute; opacity: 0;" name="question_1" class="required" value="Edition d’un texte" type="checkbox">
</div>
<label>Edition d’un texte</label>
</li>
</ul>
And I checked the last three checkboxs, I only get one value as the following :
Request Paramter Name: question_1, Value - Compilation d'un texte
I googled about this, and I found that I must add a [] after the name of each checkbox group, but when I tried that, this is what I got :
Request Paramter Name: question_1[], Value - Compilation d'un texte
How can I solve this ?
Checking multiple checkbox in form will give you values in String array form. You will have to use request.getParameterValues() inorder to get all values that you have selected in an String array.
Your sample could be like:
String[] questions = request.getParameterValues("question_1");
for(int i=0;i<questions.length;i++){
out.println(questions[i]);
}