I have the following html that is generated by SiteCore content management:
<input aria-label="Username is required." class="form" id="Username" name="Username" type="text" value="" aria-required="true">
What I would like to do is replace the above with this:
<input aria-label="Email is required." class="form" id="Email" name="Email" type="text" value="" aria-required="true">
How do I do this with jquery or pure javascript?
Ideally, I would like to replace the html as soon as the document has been loaded.
Look at the JQuery .replaceWith() function, which is designed for exactly this purpose: https://api.jquery.com/replaceWith/
You could do something like:
$('#Username').replaceWith( [ new html here ]);
Use the $.ready() function to detect when the document is fully loaded: https://api.jquery.com/jQuery.ready/
$.when( $.ready ).then(function() {
// Document is ready.
$('#Username').replaceWith(`
<input aria-label="Email is required." class="form" id="Email" name="Email" type="text" value="" aria-required="true">
`);
});
Keep in mind that editing auto-generated HTML after the document is loaded isn't a great idea because it puts the UI out of sync with what the backend expects to exist. You may want to see if there's a way to change the code your generator is spitting out, because this approach is rather brittle.
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 have a very basic form where I ask user's name, mobile, email. I have enabled autocomplete provision in these fields using the following code:
<label for="frmNameA">Name</label>
<input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">
Here is the fiddle. Currently, the user has to focus on these elements and then it displays the suggestions. Is there any way by which we can prefill this data once the form is loaded? We want to prefill the 1st suggestion that comes in the autocomplete and not some hard coded value.
Also, I saw websites like facebook, twitter etc. using only autocomplete and not prefilling the data - is there any specific reason to not prefill the things?
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
<form action="/action_page.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
You can store user values into the localStorage at completion, then load this values on page load.
This way, no need to hardcode datas, neither store server side.
// Store
localStorage.setItem("userconfig",mail.value)
// Fill data
onload = (function(){
mail.value = localStorage.getItem("userconfig")
})
I have a form that contains an input of type email that is required. I would like to have my own custom validation on that input field in order to be able to show the error message in different languages. However, currently the input field is evaluated by the HTML5 validation.
The code looks like this:
<input [(ngModel)]="user.email" type="email" class="form-control" id="email" name="email" required placeholder="{{'Email'|translate}}">
Is it possible to disable that, so that I am able to implement my own validation?
The validation code is yet to be written.
Include tag with no validate attribute as below
<form action="Form" novalidate>
<input [(ngModel)]="user.email" type="email" class="form-control" id="email" name="email" required placeholder="{{'Email'|translate}}">
<input type="submit">
</form>
I have an HTML form as follow:
<form method="POST" action="http://">
Username: <input type="text" name="username" size="15" />
Password: <input type="password" name="password" size="15" />
<input type="submit" value="Login" />
</div>
</form>
I would like functionality such that the text fields have instructions in them that clear when a user clicks in the box so that I can save space and remove the words Username and Password from outside the forms.
How can this be achieved?
The feature you're looking for is called a "placeholder". (if nothing else, just knowing this term will help you search for more info in Google)
In modern browsers which support HTML5, this is a built-in feature which you can use very easily, as follows:
<input type='text' name='username' size='15' placeholder='User name' />
However, this method only works with up-to-date browsers which support this feature.
Older browsers will need to have some Javascript code to do it. Fortunately, there are a number of scripts you can use, including some written as JQuery plug-ins. The ones I'd recommend are those which tie into the placeholder attribute on the input field, so that you can support it natively in the browsers which have this feature and fall-back to Javascript for those that don't.
Try this one: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
If you use HTML5 you can do this using the placeholder attribute:
<form method="POST" action="http://">
<label for="username">Username:</label>
<input placeholder="Username" id="username" name="username" size="15">
<label for="password">Password:</label>
<input placeholder="Password" type="password" id="password" name="password" size="15">
<input type="submit" value="Login">
</form>
I'd still include the Username and Password text wrapped in <label> tags for accessibility, but you could always hide them with some CSS like this:
form {
position:relative;
}
label {
position:absolute;
top:-9999px;
}
These are commonly called watermarks and require javascript.
Look at the jQuery-watermark plugin.
I wrote a custom one because I wanted to have a specific behaviour.
https://90dayjobmatch.com/js/jquery.wf.formvaluelabel.js
Usage:
$('#signup_job_title').formvaluelabel({text:'eg. Graphic Artist'});
Let me know if you have any questions about it.
HTH
As others have noted, there is an attribute in HTML5 that allows this called placeholder - read about it here:
http://diveintohtml5.info/forms.html
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
This does not require Javascript, but it is not supported by older browsers (see http://caniuse.com/#feat=input-placeholder).
It should be noted that placeholder is not meant to replace <label>s, which you are not using and probably should be.
<label for="username">Username:<label>
<input type="text" id="username" name="username" placeholder="Enter your username" size="15" />
Labels are important for a variety of reasons and it is bad practice to not use them.