im trying to set the max char in the textbox
<form class="form-horizontal">
<input type="text" ng-model="formtodotext" ng-model-instant maxlength="22">
<button class="btn btn-info"ng-click="addTodo()"><i class="icon-plus"></i>Toevoegen</button>
</form>
but it doesn't work on iphone, in chrome it does
PS: max="22" doesn't work either
Sorry if i wrote this wrong, stack overflow noob..
If you want to just mark an input as invalid if typed text is longer than 22, you can use ng-pattern:
<input type="text" ng-pattern="/^.{0,22}$/" ng-model="formtodotext" ng-model-instant>
Preventing user input if he tries to type 23rd character needs a custom directive:
app.directive('maxLength',function(){
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, el, attrs, ngModelCtrl){
function checkLength(text) {
var old = ngModelCtrl.$modelValue;
if(text.length<=attrs.maxLength) {
return text;
}else{
ngModelCtrl.$setViewValue(old);
ngModelCtrl.$render();
return old;
}
}
ngModelCtrl.$parsers.push(checkLength);
}
}
});
Use it like that:
<input type="text" max-length="22" ng-model="formtodotext" ng-model-instant>
I would expect maxlength to work on iOS as well as chrome. You don't need to use ng-pattern for this there's an ng-maxlength. It marks the form as invalid but it doesn't stop the user entering more text.
<input type="text" ng-model="formtodotext" ng-model-instant ng-maxlength="22" maxlength="22">
Related
I want to disable chrome autocomplete in my v-form. How do I do that? I don't see a autocomplete property on the v-form.
https://next.vuetifyjs.com/en/api/v-form/
While it is a property on a normal html form
https://www.w3schools.com/tags/att_form_autocomplete.asp
By setting autocomplete="username" and autocomplete="new-password" on v-text-field you can actually turn off the autocomplete in chrome.
here is a code that worked for me:
<v-form lazy-validation ref="login" v-model="validForm" #submit.prevent="submit()">
<v-text-field
v-model="user.email"
label="Email"
autocomplete="username"
/>
<v-text-field
v-model="user.password"
label="Password"
type="password"
autocomplete="new-password"
/>
<v-btn type="submit" />
</v-form>
Edit: autocomplete isn't set as a prop in vuetify docs but if you pass something to a component which isn't defined as prop in that component, it will accept it as an attribute and you can access it through $attrs.
here is the result of the above code in vue dev tools:
and here is the rendered html:
I wasn't able to get autofill disabled with the above methods, but changing the name to a random string/number worked.
name:"Math.random()"
https://github.com/vuetifyjs/vuetify/issues/2792
use autocomplete="off" in <v-text-field
<v-text-field
autocomplete="off"
/>
Just add:
autocomplete="false"
to your <v-text-field> or any input
autocomplete="null"
This one prevents Chrome autofill feature
I have not been able to get any of the previous proposals to work for me, what I finally did is change the text-flied for a text-area of a single line and thus it no longer autocompletes
Try passing the type='search' and autocomplete="off" props.
I also ran into a similar problem. Nothing worked until I found this wonderful Blog "How to prevent Chrome from auto-filling on Vue?" by İbrahim Turan
The main catch is that we will change the type of v-text-field on runtime. From the below code you can see that the type of password field is assigned from the value fieldTypes.password. Based on focus and blur events we assign the type of the field. Also, the name attribute is important as we decide based on that in the handleType() function.
I'm also pasting the solution here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<div v-if="isloggedin" class="welcome">
Welcome {{username}}
</div>
<div v-else id="form-wrapper">
<label for="username">Username: </label>
<input
v-model="username"
class="form-input"
type="text"
name="username"
value=""
autocomplete="off"
/>
<label for="password">Password: </label>
<input
v-model="password"
class="form-input"
:type="fieldTypes.password"
name="password"
value=""
#focus="handleType"
#blur="handleType"
autocomplete="off"
/>
<button class="block" type="button" #click="saveCredentials">
Submit Form
</button>
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
username: '',
password: '',
isloggedin: false,
fieldTypes: {
password: 'text',
}
}
},
methods: {
saveCredentials() {
this.isloggedin = true;
},
handleType(event) {
const { srcElement, type } = event;
const { name, value } = srcElement;
if(type === 'blur' && !value) {
this.fieldTypes[name] = 'text'
} else {
this.fieldTypes[name] = 'password'
}
}
}
}
</script>
I'm currently creating a form that is very similar to the following code.
<form name="test" action="/go/test" method="post">
<input type=hidden name="hotspot_url" value="http://www.test.com/">
<input name="cky" value="<%write(cky);%>" type="hidden">
<input name="accept" value="Accept" type="hidden">
<input name="saccept" size="20" value="I Accept" onClick="hotspot.accept.value='Accept'" type="submit">
<input name="sdisconnect" size="20" value="I Decline" onClick="hotspot.accept.value='Decline'" type="submit">
</form>
However, the new form has a text input field. What I want to achieve is that the value entered in that text field is placed, upon send, after the test.com value (location marked with xxx)
<input type=hidden name="hotspot_url" value="http://www.test.com/xxx">
I've looked around - but i can't seem to find a solution.
What would be the best way to get this done?
You can use a buttons onclick event, which is not of type submit. When onclick occurs, you can first change the value of hidden field and then submit the form.
Or if you use JQuery, you can use the following jQuery code to do something before the form is submitted:
$(function() {
$('#form').submit(function() {
// DO STUFF
return true; // return false to cancel form action
});
});
You can give both inputs an id, and do something like this:
give the form an "onsumbit= doThis()"
function doThis(){
var hiddeninput= $('#hiddeninput').val();
var input = $('#input').val();
$('#hiddeninput').val(hiddeninput+input);
return true;
}
this is very simple nothing fancy.
I'm making a form. And on one input tag is an OnClick event handler, which is opening a popup, where you can choose some stuff, and then it autofills the input tag.
That input tag is also readonly, so only right data will be entered.
This is the code of the input tag:
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
But the required attribute isn't working in Chrome. But the field is required.
Does anybody know how I can make it work?
I had same requirement as yours and I figured out an easy way to do this.
If you want a "readonly" field to be "required" also (which is not supported by basic HTML), and you feel too lazy to add custom validation, then just make the field read only using jQuery this way:
IMPROVED
form the suggestions in comments
<input type="text" class="readonly" autocomplete="off" required />
<script>
$(".readonly").on('keydown paste focus mousedown', function(e){
if(e.keyCode != 9) // ignore tab
e.preventDefault();
});
</script>
Credits: #Ed Bayiates, #Anton Shchyrov, #appel, #Edhrendal, #Peter Lenjo
ORIGINAL
<input type="text" class="readonly" required />
<script>
$(".readonly").keydown(function(e){
e.preventDefault();
});
</script>
readonly fields cannot have the required attribute, as it's generally assumed that they will already hold some value.
Remove readonly and use function
<input type="text" name="name" id="id" required onkeypress="return false;" />
It works as you want.
Required and readonly don't work together.
But readonly can be replaced with following construction:
<input type="text"
onkeydown="return false;"
style="caret-color: transparent !important;"
required>
1) onkeydown will stop manipulation with data
2) style="caret-color: transparent !important;" will hide cursor.
3) you can add style="pointer-events: none;" if you don't have any events on your input, but it was not my case, because I used a Month Picker. My Month picker is showing a dialog on click.
This is by design. According to the official HTML5 standard drafts, "if the readonly attribute is specified on an input element, the element is barred from constraint validation." (E.g. its values won't be checked.)
Yes, there is a workaround for this issue. I found it from https://codepen.io/fxm90/pen/zGogwV site.
Solution is as follows.
HTML File
<form>
<input type="text" value="" required data-readonly />
<input type="submit" value="Submit" />
</form>
CSS File
input[data-readonly] {
pointer-events: none;
}
If anyone wants to do it only from html, This works for me.
<input type="text" onkeydown="event.preventDefault()" required />
I think this should help.
<form onSubmit="return checkIfInputHasVal()">
<input type="text" name="formAfterRederict" id="formAfterRederict" size="50" required readonly="readonly" OnClick="choose_le_page();" />
</form>
<script>
function checkIfInputHasVal(){
if($("#formAfterRederict").val==""){
alert("formAfterRederict should have a value");
return false;
}
}
</script>
You can do this for your template:
<input required onfocus="unselect($event)" class="disabled">
And this for your js:
unselect(event){
event.preventDefault();
event.currentTarget.blur();
}
For a user the input will be disabled and required at the same time, providing you have a css-class for disabled input.
Based on answer #KanakSinghal but without blocked all keys and with blocked cut event
$('.readonly').keydown(function(e) {
if (e.keyCode === 8 || e.keyCode === 46) // Backspace & del
e.preventDefault();
}).on('keypress paste cut', function(e) {
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="readonly" value="test" />
P.S. Somebody knows as cut event translate to copy event?
Required and readonly don't work together.
Although you can make two inputs like this:
<input id="One" readonly />
<input id="Two" required style="display: none" /> //invisible
And change the value Two to the value that´s inside the input One.
I have the same problem, and finally I use this solution (with jQuery):
form.find(':input[required][readonly]').filter(function(){ return this.value === '';})
In addition to the form.checkValidity(), I test the length of the above search somehow this way:
let fcnt = $(form)
.find(':input[required][readonly]')
.filter(function() { return this.value === '';})
.length;
if (form.checkValidity() && !fcnt) {
form.submit();
}
function validateForm() {
var x = document.forms["myForm"]["test2"].value;
if (x == "") {
alert("Name missing!!");
return false;
}
}
<form class="form-horizontal" onsubmit="return validateForm()" name="myForm" action="" method="POST">
<input type="text" name="test1">
<input type="text" disabled name="test2">
<button type="submit">Submit</button>
</form>
I am trying to change the language of the error message in the html5 form field.
I have this code:
<input type="text" name="company_name" oninvalid="setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required />
but on submit, even the field is not blank, I still get the error message.
I tried with <input type="text" name="company_name" setCustomValidity('Lütfen işaretli yerleri doldurunuz') required />
but then the english message is displayed. Anyone know how can I display the error message on other language?
Regards,Zoran
setCustomValidity's purpose is not just to set the validation message, it itself marks the field as invalid. It allows you to write custom validation checks which aren't natively supported.
You have two possible ways to set a custom message, an easy one that does not involve Javascript and one that does.
The easiest way is to simply use the title attribute on the input element - its content is displayed together with the standard browser message.
<input type="text" required title="Lütfen işaretli yerleri doldurunuz" />
If you want only your custom message to be displayed, a bit of Javascript is required. I have provided both examples for you in this fiddle.
your forget this in oninvalid, change your code with this:
oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"
<form><input type="text" name="company_name" oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')" required /><input type="submit">
</form>
HTML:
<form id="myform">
<input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" type="email" required="required" />
<input type="submit" />
</form>
JAVASCRIPT :
function InvalidMsg(textbox) {
if (textbox.value == '') {
textbox.setCustomValidity('Lütfen işaretli yerleri doldurunuz');
}
else if (textbox.validity.typeMismatch){
textbox.setCustomValidity('Lütfen işaretli yere geçerli bir email adresi yazınız.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
Demo :
http://jsfiddle.net/patelriki13/Sqq8e/4
This work for me.
<input oninvalid="this.setCustomValidity('custom text on invalid')" onchange="this.setCustomValidity('')" required>
onchange is a must!
I know this is an old post but i want to share my experience.
HTML:
<input type="text" placeholder="Username or E-Mail" required data-required-message="E-Mail or Username is Required!">
Javascript (jQuery):
$('input[required]').on('invalid', function() {
this.setCustomValidity($(this).data("required-message"));
});
This is a very simple sample. I hope this can help to anyone.
TLDR: Usually, you don't need to change the validation message but if you do use this:
<input
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
oninput="this.setCustomValidity('')"
required="required"
type="text"
name="text"
>
The validation messages are coming from your browser and if your browser is in English the message will be in English, if the browser is in French the message will be in French and so on.
If you an input for which the default validation messages doesn't work for you, the easiest solution is to provide your custom message to setCustomValidity as a parameter.
...
oninvalid="this.setCustomValidity('Your custom message / 您的自定义信息')"
...
This is a native input's method which overwrites the default message. But now we have one problem, once the validation is triggered, the message will keep showing while the user is typing. So to stop the message from showing you can set the validity message to empty string using the oninput attribute.
...
oninput="this.setCustomValidity('')"
...
//Dynamic custome validation on all fields
//add validate-msg attr to all inputs
//add this js code
$("form :input").each(function(){
var input = $(this);
var msg = input.attr('validate-msg');
input.on('change invalid input', function(){
input[0].setCustomValidity('');
if(!(input[0].validity.tooLong || input[0].validity.tooShort)){
if (! input[0].validity.valid) {
input[0].setCustomValidity(msg);
}
}
});
});
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Your Message')" oninput="this.setCustomValidity('') />
this can help you even more better, Fast, Convenient & Easiest.
For the lost souls who are seeking a way to fully localize their error messages, see the snippet below. In short, you have to switch over the properties of event.target.validity and override the corresponding error message using event.target.setCustomValidity(message). If you just care about the empty field case as OP, just consider the case of valueMissing.
Note that the handler is passed in the React way, but other answers already covered how to do it in vanilla JS.
For the meaning of each validity state and how to implement customized error messages, see MDN: Validating forms using JavaScript.
const handleInvalidForm = (event) => {
const { patternMismatch,
tooLong,
tooShort,
rangeOverflow,
rangeUnderflow,
typeMismatch,
valid,
valueMissing } = event.target.validity;
if (patternMismatch)
event.target.setCustomValidity('...');
else if (tooLong)
event.target.setCustomValidity('...');
else if (tooShort)
event.target.setCustomValidity('...');
else if (rangeOverflow)
event.target.setCustomValidity('...');
else if (rangeUnderflow)
event.target.setCustomValidity('...');
else if (typeMismatch)
event.target.setCustomValidity('...');
else if (valid)
event.target.setCustomValidity('...');
else if (valueMissing)
event.target.setCustomValidity('...');
}
// ...
<form onSubmit={handleFormSubmit}
onInvalid={handleInvalidForm}
>
{emailTextField}
{passwordTextField}
{signInButton}
</form>
<input type="text" id="inputName" placeholder="Enter name" required oninvalid="this.setCustomValidity('Please Enter your first name')" >
this can help you even more better, Fast, Convenient & Easiest.
Do it using JS. Grab the class of the error message, and change it's content for whereever it appears.
var myClasses = document.getElementsByClassName("wpcf7-not-valid-tip");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "Bitte füllen Sie das Pflichtfeld aus.";
}
<form>
<input
type="text"
name="company_name"
oninvalid="this.setCustomValidity('Lütfen işaretli yerleri doldurunuz')"
required
/><input type="submit" />
</form>
I have this code: <p class = "foo">Text</p>
And I also have a form: <form action = "XXX.php" method = post></form>
However, how can I get the value of the <p> when I submit it, as the <p> element can be changed.
So what I mean is to be able to post the value of the <p> when the user submits the form, and to be able to access it from that php file with: $_POST['foo'];
Thanks, I have tried to be as clear as possible.
You have to use Javascript for that
A jQuery function that will work
$("form").submit(function(){
var value = $("p").html();
// If foo already exists
if( $("[name=foo]").length > 0 )
{
$("[name=foo]").val(value);
}
else
{
var input = $("<input />", { name : "foo",
value : value ,
type : "hidden" });
$(this).append(input);
}
});
Use
<input type="hidden" value="something" name="something" id="something" />
and when you change inner html of <p> change the value of hidden input.
I think your best bet is to make it an input with readonly enabled, and style to to look like a <p>. It's better then trying to add it to the POST parameters with JavaScript.
Here's a quick example. I bet it could still be improved with a few extra CSS quirks, experiment a bit.
The easiest thing to do is set the value of a hidden form field when you change the contents of your <p>.
Alternatively, you can get its contents and post with JavaScript.
For text you need to use input field:
<input type="text"/>
Form fields should must have an id:
<input type="text" id="pewpew" class="foo"/>
I would go with:
<input type="text" id="pewpew" class="foo" value="default text goes here"/>
OR
Go with different workarounds, like setting form's hidden elements on the fly, etc.
You can create hidden field on the fly and set its value on form submit. Like this:
<form id="form" action="/somewhere" method="post">
<p>Some text</p>
<input type="submit" value="Submit"/>
</form>
<script type="text/javascript">
var form = document.getElementById('form');
form.onsubmit = function()
{
var p = this.getElementsByTagName('p')[0];
if (!document.getElementById('pval'))
{
var pinput = document.createElement('input');
pinput.setAttribute('type', 'hidden');
pinput.setAttribute('id', 'pval');
pinput.setAttribute('name', 'p');
this.appendChild(pinput);
}
document.getElementById('pval').value = p.innerHTML;
return true;
}
</script>
Works, i've tested.