We have a HTML form and I have pasted the code for our Date of Birth field below. When the user enters the date, it requests it in dd/mm/yyyy format. However, once they click off the field, it changes to yyyy/mm/dd. As a result, our CRM is not accepting it because of the format. Is there a way to keep it as dd/mm/yyyy?
<label><span class="dateInput dateOnlyInput"> <input id="00N0Y00000RWiNa" name="00N0Y00000RWiNa" size="100" placeholder="Date of Birth" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" required="true" data-cip-id="00N0Y00000RWiNa"></span></label>
Thanks
James
first it would be good to make sure you have only one "id" attribute on the input field.
Here is an example that might help you.
Here I removed the first id to get rid of the error in jsfiddle.net
function formatDate() {
// select element
const date = document.querySelector('#date');
// pick up date
let currentValue = date.valueAsNumber;
// change type
date.type = "text";
// update value with prev set value from date picker
date.value = new Date(currentValue).toLocaleDateString('en-GB');
}
<label>
<span class="dateInput dateOnlyInput">
<input name="00N0Y00000RWiNa"
size="100"
placeholder="Date of Birth"
class="textbox-n"
type="text"
onfocus="(this.type='date')"
onblur="formatDate()"
required="true"
data-cip-id="00N0Y00000RWiNa"
id="date">
</span>
</label>
I have this date Input:
I am trying to display a default value:
<Input value="2017-06-01" type="date" />
But, as you see above, it doesn't get displayed.
I have followed the Mozilla documentation:
You can set a default value for the input with a date inside the value
attribute, like so:
<input type="date" value="2017-06-01">
Try to use defaultValue props
<Input defaultValue="2017-06-01" type="date" />
I have this below where birthDate is "1938-08-08T00:00:00" and I want it to be "dd/MM/yyyy", but I can't seem to figure out how to use the Angular date pipe in ngModel.
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [(ngModel)]=matterData.birthDate name="birthDate">
I tried this with no luck:
[(ngModel)]={{matterData.birthDate | date: 'dd/MM/yyyy'}}
The only way I can get it to work is if I format the date in the .ts code first with Angular 'formatDate()'
I don't understand why you want to format it inside a ngModel.
One way data binding (Interpolation {{}})doesn't work inside a two way databinding. If you want to use pipe, I would instead suggest to use a value attribute instead of ngModal.
Your HTML should look like:
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [value]="matterData.birthDate | date: 'dd/MM/yyyy'" name="birthDate">
Here is a live example for the same. https://stackblitz.com/edit/angular-ubpthb
On Angular 9, this works for me, with two way binding:
<input type="date" class="form-control" name="birthDate" [(ngModel)]="matterData.birthDate" [ngModel]="matterData.birthDate | date:'dd/MM/yyyy'" required>
Ref - Using Pipes within ngModel on INPUT Elements in Angular
<input type="text" class="form-control" placeholder="ex. MM/DD/YYYY" [ngModel]="matterData.birthDate | date: 'dd/MM/yyyy'" (ngModelChange)="matterData.birthDate=$event" name="birthDate">
I have this input field
<input type="datetime-local" required>
I would like the date part to be always required, but not the time part...
I tried with pattern, like
pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}.*"
but it doesn't seem to work...
any idea...
Edit:
I explain better here
<form name="test" method="POST" action="/">
<input type="datetime-local" name="event_date_start" id="event_date_start"
min="2011-06-07T00:00"
max="2099-06-14T00:00" required><br>
<input type="submit"/>
What I want is to use datetime, but time must be optional.
With the above example, submit is not allowed until you insert 00 in the time field..
I want to leave that optional...
No need for pattern just use the attributes min, max and value:
<input type="datetime-local"
value="2018-06-12T19:30"
min="2018-06-07T00:00"
max="2018-06-14T00:00" required>
If you want an inputfield with date only use:
<input type="date" required>
For time is optional:
<input type="date" required> <input type="time">
For example I have a textfield. The field is mandatory, only numbers are required and length of value must be 10. When I try to submit form with value which length is 5, the default error message appears: Please match the requested format
<input type="text" required="" pattern="[0-9]{10}" value="">
How can I change HTML form validation errors default messages?
If the 1st point can be done, is there a way to create some property files and set in that files custom error messages?
This is the JavaScript solution:
<input type="text"
pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Please enter Alphabets.')"
onchange="try{setCustomValidity('')}catch(e){}" />
The "onchange" event needs when you set an invalid input data, then correct the input and send the form again.
I've tested it on Firefox, Chrome and Safari.
But for Modern Browsers:
Modern browsers didn't need any JavaScript for validation.
Just do it like this:
<input type="text"
pattern="[a-zA-Z]+"
title="Please enter Alphabets."
required="" />
When using pattern= it will display whatever you put in the title attrib, so no JS required just do:
<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
I found this code in another post.
HTML:
<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />
JAVASCRIPT :
function InvalidMsg(textbox) {
if(textbox.validity.patternMismatch){
textbox.setCustomValidity('please enter 10 numeric value.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
Fiddle Demo
To prevent the browser validation message from appearing in your document, with jQuery:
$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
you can remove this alert by doing following:
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>
just set the custom message to one blank space
you can change them via constraint validation api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
if you want an easy solution, you can rock out civem.js, Custom Input Validation Error Messages JavaScript lib
download here: https://github.com/javanto/civem.js
live demo here: http://jsfiddle.net/hleinone/njSbH/
The setCustomValidity let you change the default validation message.Here is a simple exmaple of how to use it.
var age = document.getElementById('age');
age.form.onsubmit = function () {
age.setCustomValidity("This is not a valid age.");
};
I Found a way Accidentally Now:
you can need use this: data-error:""
<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>
I found a bug on Mahoor13 answer, it's not working in loop so I've fixed it with this correction:
HTML:
<input type="email" id="eid" name="email_field" oninput="check(this)">
Javascript:
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");
}
else {
input.setCustomValidity("");
}
}
It will perfectly running in loop.
This is work for me in Chrome
<input type="text" name="product_title" class="form-control"
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')" />
To set custom error message for HTML validation use,
oninvalid="this.setCustomValidity('Your custom message goes here.')"
and to remove this message when user enters valid data use,
onkeyup="setCustomValidity('')"
As you can see here:
html5 oninvalid doesn't work after fixed the input field
Is good to you put in that way, for when you fix the error disapear the warning message.
<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />