I have this simple input field for e-mail addresses:
<form>
<input type="email" placeholder="E-Mail" required>
<input type="submit" value="Send" />
</form>
If you write "max#mail.de", you can submit the form, because the email is valid.
If you write "max#.de", you can't submit the form, because the email is invalid.
But!
If you write "max#i9", you can submit the form, too. But the mail is invalid. Why?
And how can I fix it?
Because max#i9 is a valid email as it stated in this article.
You can "fix" it by adding your own email pattern, see this tutorial:
<form>
<input type="email" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
</form>
Here's a more detailed question about Why does HTML5 form validation allow emails without a dot?
<form>
<input pattern="[a-zA-Z0-9.-_]{1,}#[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}$"
type="text" required />
<input type="submit" value="Send" />
</form>
This is because HTML5 type="email" validator is only find # symbol in your input string. If it is found your form will submitted else it won't submitted.
To avoid this you have to use javaSctipt form Validation like this :-
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("#");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
}
}
HTML can't help you with data validation, you can learn js to do that
Related
in my form I have an input box of type email, like this:
<input class="form-control" id="Empresa_Email" name="Empresa_Email" type="email" maxlength = "50" placeholder="xxxx#yyyy">
If I don't put any '#' it considers that the email is not valid and sends an error messagem. Although, I want to also send an error message if i don't introduce an ending statement like ".com" or ".pt", because that's not valid either. How can i achieve this?
<input type="email"> already validates that the value doesn't contain more than one #, among other things.
The MDN docs show the actual regex browsers are supposed to use.
You've now edited the question to ask about rejecting email addresses with a lack of top-level domain, rather than multiple # symbols.
The fact is that such email addresses are totally valid.
But if you really want to ensure there is a dot in the domain part, you could add a pattern attribute with a regex like this:
<input type="email" pattern=".*#.+\..+">
If you don't want to use an email value type. You would need to use javascript to check if the text of your input has 2 or more "#" characters.
This question might help you a little bit.
detecting mistyped email addresses in javascript
It would be something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" onclick="atcounter('as#at#.com')">
</body>
<script type="text/javascript">
function atcounter(a) {
// get values
var m = a.length;
var flag=0;
for (var i = 0; i < m; i++) {
if (a[i]='#') {
flag++;
}
}
if (flag>1) {
alert('you spelled more than one "#"')
}
}
</script>
</html>
What you are looking for can be achieved through the pattern attribute using Regex only for ".com" and ".pt":
<form>
<input type="text"
pattern="[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*#[a-zA-Z]+(?:\.com|\.pt)"
required>
<input type="submit" value="Send Request">
</form>
And here is a complete pattern to validate any email :
<form>
<input type="text"
pattern="[a-zA-Z0-9_]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*#(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?"
required>
<input type="submit" value="Send Request">
</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'm making a HTML submission form and I want to have the form emailed to my email address without using a PHP script since Github Pages doesn't support it.
<form action="MAILTO:shirui.wang#hotmail.com" method = "post" enctype = "text/plain">
<p>Email Address:<input type = "text" placeholder = "Email Address:" size = "40" id="Email"></p>
<textarea rows="4" cols="50" id = "Textbox" placeholder="Enter your feeback here:"></textarea>
<p><input type="submit" value="Submit" id = "Submission"></p>
</form>
Right now, when I press submit, it will open my email client but the message I typed into the textbox does not copy over into the email message.
How do I get the content of the textarea to be copied into message part of the email?
You have to do this with javascript:
you need an a like this:
<form id="themagicform" >
<textarea id="yourtextarea"></textarea>
<a id="ThemagicA" href='mailto:me#me.com?subject=Me&body=textofemail'>Mail me</a>
</form>
and then use jquery or javascript to change textofemail when they press submit:
$("themagicform").on('submit', function(){
var hrefStr = $('themagicA').attr('href');
var text = $('yourtextarea').text();
hrefStr.replace('textofemail', text);
$('themagicA').attr('href', hrefStr);
});
Done :), hope it's works.
In HTML you can specify a mailto: address in the <form> element's [action] attribute, The [Action] is what opens the email client the method="GET" populates the form.
<form action="mailto:youraddr#domain.tld" method="GET">
<input name="subject" type="text" />
<textarea name="body"></textarea>
<input type="submit" value="Send" />
</form>
What this will do is allow the user's email client to create an email and the GET will pre-populated with the fields in the <form>.
Can a html5 form validation
<form>
<input type="email" id="email" placeholder="Enter your email here..." required>
<button type="submit">Submit</button>
</form>
can it be done without a Form
<div>
<input type="email" id="email" placeholder="Enter your email here..." required>
<button type="submit">Submit</button>
</div>
Yes, use the constraint validation API. See http://www.w3.org/TR/html5/forms.html#the-constraint-validation-api. For instance, you can call element . checkValidity(). See also https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation or https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity. For example:
var email = document.getElementById('email');
var valid = email . checkValidity();
if (!valid) ...
or use the invalid event which is fired when checkValidity() fails:
email.addEventListener("invalid", function() { alert("Email invalid"); });
You can use setCustomValidity to set the validity status and/or error message:
if (!email.value) email.setCustomValidity("Email is missing");
If you want to see the errors in the page, instead of just receiving a boolean with the validation result, you can use:
document.gelElementById('email').reportValidity();
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')" />