Develop Reference

Add leading symbol to input field

Is it possible to add leading and ending symbols or text to input field which cannot be removed?
I am trying to have a $ at the beginning and % at the end of two fields. Similar to the input fields on this website: https://www.nerdwallet.com/mortgages/mortgage-calculator
<input type="text" maxlength="12" name="purchasePrice" data-name="purchasePrice" placeholder="$200,000" required="">
<input type="text" maxlength="3" name="rate" data-name="rate" placeholder="2%" required="">

pattern for input type=“text” with min and max number and with conditional

How to write pattern for input type="text" (it can't be number and the validation can't be with JS) that allow me to enter only numbers, min:1 and max:30? with some conditional:
<input type="checkbox" id="Checkbox" name="Checkbox" [attr.pattern]="selectedField === 'calendar' ?([1-9]|[12]\d|3[01]): false" [(ngModel)]="periodicObj[0].ischecked" (change)="OnChange($event,0)">
So basically based on selectedField I need to validate my input field

Try this
<input type="text" name="someName" id="someId" required="required" pattern="(30|([1-2][0-9])|[1-9])"/>

Why don't you use input type="number" so it will handle min and max
<input type="number" min="1" max="30" />
And without javascript how you will validate the value ?

maximum numbers in js

How to make my input maximum 10 digits length.How to make possible to enter only 10 numbers.
<input type="text" maxlength="10" onkeyup="return isAllowedSymbol(this); checkNumbers(this);" "placeholder="Enter data" name="answer" ><br>
function checkNumbers(input)
{
if (input.value.length > 10)
{
input.value = input.value.replace(input.value, '');
}
}

This works already, but you have a syntax error - I removed the extra quotation mark.
<input type="text" maxlength="10" onkeyup="return isAllowedSymbol(this); checkNumbers(this);" placeholder="Enter data" name="answer" >

You are already doing it with maxlength="10", you have quotes messed up though. JS is redundant.
<input type="text" maxlength="10" placeholder="Enter data" name="answer" ><br>

dijit ValidationTextBox how to add minlength and maxlength

I would like to know how (with simple working example) to add maxlength and minlength to input tag generated by
dijit/form/ValidationTextBox
Example of desired output:
<input maxlength="10" minlength="2" class="dijitReset dijitInputInner" data-dojo-attach-point="textbox,focusNode" autocomplete="off" name="title" type="text" tabindex="0" id="Image-1-title-LabelValidationTextBox" aria-required="undefined" value="Title text for image Image-1" aria-invalid="false">

try this example with regex constraint
<input type="text" value="someTestString" required="true"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp: '[a-zA-Z0-9$%!_]{2,10}', invalidMessage: 'The value must be at least 2 character and maximum 10'" />

ValidationTextBox has the properties minLength and maxLength. They are used in the following why in a declarative manner.
<input data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="required:true,
maxLength:5,
minLength:2"
type="text"
name="exmaple" />

Here's another solution:
registry.byId("validationTextBox").validator = function(value, constraints) {
if(value) {
return value.length >= 2 && value.length <= 10;
}
return true;
}

Need help setting a minimum number of characters using JavaScript

I am trying to set a minimum of 5 characters for a password field and it is not working. Ever time I put in 0 or 1 characters it works but the challenge fails to work when entering 2 to 5 characters. Can someone take a look at what I have and tell me where I am going wrong?
<fieldset>
<legend>Password</legend>
<label>Create Password</label>
<input type="password" name="password" id"password"><br /><br />
<label>Confirm Password</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</fieldset><br />
if (document.sample.password.value <=5) {
alert("Password must contain 5 characters.");
document.sample.password.select();
document.sample.password.style.backgroundColor="yellow";
return true; // leave now
}

Change it to:
<fieldset>
<legend>Password</legend>
<label>Create Password</label>
<input type="password" name="password" id="password"><br /><br />
<label>Confirm Password</label>
<input type="password" name="confirmPassword" id="confirmPassword">
</fieldset><br />
if (document.getElementById('password').length<=5) {
alert("Password must contain 5 characters.");
document.getElementById('password').select();
document.getElementById('password').style.backgroundColor="yellow";
return true; // leave now
}
Note the added = in the HTML for id"password"