I am trying to get one of those MailChimp embedded forms to work on my website (WordPress). The placeholder text for the Email field, etc. isn't disappearing like it's supposed to.
I'm using this code:
< input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus=”if(this.value==this.defaultValue)this.value=’‘;” onblur=”if(this.value==’‘)this.value=this.defaultValue;” >
I tried messing around with a placeholder attribute as well, but didn't get anywhere with that either.
Suggestions? (Thank you!)
It appears your the special quote characters are throwing off the Javascript parser (tested in Chrome stable on Windows).
<input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" >
The proper solution here to prevent this from occurring is to use a proper Javascript IDE that will insert valid double quotes.
You have a problem with spacing (before the input tag, and quotation marks
<input type="email" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;">
Related
I'm trying to add an email input to my form in HTML5, but somehow it still allows me to write anything without # and the other stuff that an email contains.
<input class="form-control" type="email" id="email" name="email" required>
Also tried:
<input type="text" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" class="form-control" id="email" name="email" required>
and still nothing happens if I write it incorrectly.
If you are not trying to validate while typing, then it will automatically show error after you submit it.
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
I would like to make my website work identically on every browser.
Unfortunately, the validation mechanism introduced their differences.
Field of type 'e-mail' on Chrome and Opera 'trim';delete blank spaces on input of e-mail field and Firefox no cuts signs and do not accept e-mail in this form.
<input type="email" id="e-mail" class="" name="e-mail" value="" placeholder="" autocomplete="off">
Example:
If you want to get the same behavior between browsers while keeping the email verification, you can trim the field on blur:
document.getElementById("e-mail").addEventListener("blur",function(e){
this.value = this.value.trim();
});
<input type="email" id="e-mail" class="" name="e-mail" value="" placeholder="" autocomplete="off">
i have a text field for email which is set to required, i want it to show a text that you need to include "#" on your email. like how it displays "fill out this field" when you pressed the button without typing anything on the field. How can i do it? Thanks.
EXAMPLE:
<input type="text" name="email" required>
You can try to use the type in case you are using HTML5 as:
<input type="email" name="email" required>
If you are not using the HTML5 then you need to use some scripting language like Javascript to check the validity. For example in Javascript it would be like:
if(!document.getElementById("email").checkValidity())
In case of PHP it would be like
if (filter_var($email, FILTER_VALIDATE_EMAIL))
You can check it by using (since HTML5):
<input type="mail" name="email" required>
It will display a warning if format is not correct (tooltip, or red color around the field, depending on your browser.
Or you can check it on the server side, once you form is sent. For example with PHP, you can use filter_var
Use pattern attribute,
<input type="text" name="email" pattern=".*[#]+.*" />
<input type="email" name="email" required />
More details are at: http://www.w3schools.com/tags/att_input_pattern.asp
Given the form code below, Is it possible to populate placeholder attributes for the form input fields by reading in the text of the adjacent label
Raw html
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL">
</div>
Effective desired output after CSS conversion
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email Address">
</div>
In other words, I want to use CSS (perhaps generated content) to dynamically add a placeholder attribute on the input and make the value of the placeholder attribute reflect the label text (or hardcoded text if reading in the label text is beyond CSS)
CSS cannot modify HTML, so this is not possible.
Generated content, as the name implies, refers to content, not attributes, so it cannot be used to add or modify attributes either.
I am not sure why you don't want to use Javascript/Jquery for this, but if you change your mind it would be very simple to do.
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address</label>
<input type="email" value name="EMAIL" class="required email" id="mce-EMAIL">
</div>
then with jquery you could use this:
var labelText = $('label').html();
$('#mce-EMAIL').attr('placeholder', labelText);
Here is the fiddle