I have an input field which be should bigger than 0, I'm using min="0.00000001" to validate input number is > 0.
<input type="number" step="0.00000001" min="0.00000001" name="price" value="[%price%]" />
Since I don't want to specify the step and min, I just want to validate if the input number is bigger than 0.
Is there any better way to compare input? For example something like input > 0 or min > 0
I search for a solution but could not find one without using step+min.
Using only html5, can we do this? Thanks for any help
<form method="post">
<b>Number Input:</b>
<input type="number" step="0.00000001" min="0.00000001" name="number" value="" />
<input type="submit" class="submit" value="Save" />
</form>
There is no way doing this in pure HTML5 without JavaScript. As mentioned in comments, the pattern attribute cannot be used.
But this can be handled using trivial JavaScript code, invoked via the oninput attribute, and using setCustomValidity:
<form method="post">
<b>Number Input:</b>
<input type="number" step="any" min="0" name="number" value=""
oninput="check(this)" />
<input type="submit" class="submit" value="Save" />
</form>
<script>
function check(input) {
if (input.value == 0) {
input.setCustomValidity('The number must not be zero.');
} else {
// input is fine -- reset the error message
input.setCustomValidity('');
}
}
</script>
Related
I am creating a form where someone needs to enter a certain code so I want to use the pattern attribute on my input element.
But I need more than this.
For example the code looks like this: 12.01.19-123.45
But I don't want to user to enter the "." and the "-" symbol manually.
Is there a built in way so it gets added automatically?
No there is no built-in way. There are input fields with types for e.g. date and number though.
In your case, you could either chain multiple input fields (field values with the same name attribute will be sent as an array). Or have a custom validator and or formatter function that does format the code on a key-event such as key-up for example. You could use regex to do so or write a small parser for it.
E.g. something like that:
function onSubmit(event) {
event.preventDefault();
const myFieldArray = document.getElementsByName('myField[]');
for (const i of myFieldArray.values()) {
console.log(i.value);
}
}
input {
width: 50px;
/* do not do this - this is just for the demo */
}
<form onSubmit="onSubmit(event)">
<input type="number" name="myField[]" placeholder="12" />
<span>.</span>
<input type="number" name="myField[]" placeholder="01" />
<span>.</span>
<input type="number" name="myField[]" placeholder="19" />
<span>-</span>
<input type="number" name="myField[]" placeholder="123" />
<span>.</span>
<input type="number" name="myField[]" placeholder="45" />
<input type="submit" value="submit">
</form>
or
<form onSubmit="onSubmit(event)">
<input type="string" name="myField" placeholder="12" onKeyUp="format(this.value)"/>
<input type="submit" value="submit">
</form>
function format(value) {
// format the value here ...
}
I am trying to assign a HTML text attribute's value to a hidden attribute's value.
The text code:
<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />
I've used alert to try the output of the concatno value. For example, if user enter 1010, then the output will be 10100001.
Then my hidden code:
<input type="hidden" id="hide" name="hide" value=concatno>
I want my hidden value to be 1010001, but instead the value became "concatno". How should I assign the value in my hidden attribute?
The problem here is that you never updated your #hide element.
You need to use some javascript, for example:
document.getElementById('hide').value = concatno;
Working snippet:
<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>
Note that even if the event is not the issue here, I suggest you to use another trigger, like onkeyup, so that the value is updated more often.
I've also changed your hidden element to disabled to make it visual.
Moreover, you should learn to avoid inline JavaScript.
Here is how I'll do it:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>
Documentation: getElementById
Hope it helps.
The issue is that you never actually update the value of your #hide element. You need to set its value inside of your event binding (just made the input visible for reference):
<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />
<input type="text" id="hide" name="hide" value=concatno disabled />
It's also worth noting though, that you should generally avoid using obtrusive event handlers. Instead, delegate event handling to external Javascript. This way, your designer doesn't need to understand or even worry about the JS.
Here's an example using unobtrusive handlers:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />
Try using name/id instead;
<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type="hidden" id="hide" name="hide" />
without inline scripts:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});
<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />
I'm going to realize input of text like this:
<input type="text" maxlength="16" required/>
And want to use valid and invalid stations like this:
input:invalid {
background: #fdd;
}
input:valid {
background: #dfd;
}
But when i write any text my input is valid always. I tried use pattern:
pattern=".{16,}"
But that did not solve anything. Where is my mistake?
The input must be valid when length of input is equal to 16.
You're close! Here's how to do it.
Allowing only alphanumerics
<form>
<input id="username" type="text" pattern="[a-zA-Z0-9]{16}" required>
<input id="submit" type="submit" value="create">
</form>
Allowing any character
<form>
<input id="username" type="text" pattern=".{16}" maxlength="16" required>
<input id="submit" type="submit" value="create">
</form>
With jQuery mask() plugin
Here, we just force the delimiter to be part of the input value followed by the number of characters in each group. In this case 4 numbers followed by a space.
$(document).ready(function() {
$('#username').mask('9999 9999 9999 9999');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.min.js"></script>
<form>
<input id="username" type="text" pattern="[0-9]{4} [0-9]{4} [0-9]{4} [0-9]{4}" required>
<input id="submit" type="submit" value="create">
</form>
For more info about regex and patterns, check out Regexr.
In your code, the attribute maxlength="16" does not allow more than 16 characters to be typed in the input box. The regular expression you are using is valid when the input is between 0 and 16 characters. Therefore, you regexp should be:
.{16,16}
And your HTML code:
<input type="text" pattern=".{16,16}" maxlength="16" required/>
You might want to see it working in this fiddle.
I have this HTML code
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
If I type 1000 on id="amount", the id="cash" min will be 1000.
But it doesn't work.
The most straightforward way is to add an onchange handler to the payment input, such as:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" min="0" class="form-control" name="txtamount" placeholder="Enter Payment Here..."
onchange="document.getElementById('cash').min=this.value;"/>
<input required id="cash" type="number" min="document.getElementById('amount').value" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
<input type="submit" class="btn btn-primary pull-right" name="btnenroll" value="Done" />
</form>
This gets you the functionality you are looking for without needing to include a third party library like jQuery.
In this case you should use Jquery onchange or keypress
$("#cash").attr({
"min" : $("#amount").val()
});
If you are using jQuery, use the below,
$("#amount").change(function() {
$("#cash").attr('min',$("#amount").val());
});
Refer - https://api.jquery.com/change/
I don't think you can put javascript in min, and also you have a pair of double quote in another pair of double quote, which will break the the tag (You can inspect element and you will figure out.)
So the idea is when the value of amount element change, we change cash's min value. So we can add a event listener to amount element. Whenever it is changed, set the min for cash element. Here is a working sample code:
<form method="post" action="cashier.php" enctype="form-data/multipart">
<input required id="amount" type="number" class="form-control" name="txtamount" placeholder="Enter Payment Here..." />
<input required id="cash" type="number" class="form-control" name="txtcash" placeholder="Enter Cash Here..." />
</form>
<script>
function setMin() {
var amount = document.getElementById("amount");
var cash = document.getElementById("cash");
cash.min = amount.value;
}
var trigger = document.getElementById("amount");
trigger.addEventListener("change", setMin, false);
</script>
As you can see, I removed your js in html and add a event listener. Hope this will help.
I have the following form
<form name="input" action="http://testdomain.com/search/?" method="get" autocomplete="off">
<input type="text" name="?wpv_paged_preload_reach=1&wpv_view_count=1&wpv_post_id=205499&wpv_post_search=">
<input type="submit" id="searchsubmit" value="">
</form>
However the actual URL displays the following search query:
/search/?%3Fwpv_paged_preload_reach%3D1%26wpv_view_count%3D1%26wpv_post_id%3D205499%26wpv_post_search%3D=test
It seems that special symbols such as ? and = are getting replaced with special Encoding characters.
My question is, how do I get the form to not switch my special symbols with the encoding characters?
Thanks
The name of an input element controls the name of one field. The browser doesn’t blindly mash it and its value together and send that to the server. For a GET request, you can include each one as a hidden field:
<form name="input" action="http://testdomain.com/search/" method="get" autocomplete="off">
<input type="hidden" name="wpv_paged_preload_reach" value="1" />
<input type="hidden" name="wpv_view_count" value="1" />
<input type="hidden" name="wpv_post_id" value="205499" />
<input type="text" name="wpv_post_search" />
<input type="submit" id="searchsubmit" />
</form>