I'm having trouble resetting the label inside a paper-input-container after submitting a form. The form is a simple login form. If a user logs in, out, and back in again without a page refresh (from the browser), the label appears to be stuck as if there were a value in the input.
Here's an image to show the difference:
Here's the form inside the element:
<form is="iron-form">
<paper-input-container id="email_container">
<paper-input-error>E-mail or Password is incorrect</paper-input-error>
<label>E-Mail Address</label>
<input is="iron-input" id="email" on-blur="validateEmail" value="{{emailInput::input}}">
</paper-input-container>
<paper-input-container id="password_container">
<label>Password</label>
<input is="iron-input" id="password" type="password" value="{{passwordInput::input}}">
</paper-input-container>
<paper-button raised dialog-dismiss>Cancel</paper-button>
<paper-button raised on-tap="handleCsrf">Login</paper-button>
</form>
These two approaches both get the form to the "after login" state the same:
//
this.emailInput = null;
this.passwordInput = null;
//
this.emailInput = "";
this.passwordInput = "";
I thought this would reset the entire container somehow, but it does nothing:
this.$.email_container = null;
this.$.password_container = null;
iron-input
bindValue
String
Use this property instead of value for two-way data binding.
<paper-input-container id="email_container">
<paper-input-error>E-mail or Password is incorrect</paper-input-error>
<label>E-Mail Address</label>
<input is="iron-input" id="email" on-blur="validateEmail" bind-value="{{emailInput::input}}">
</paper-input-container>
<paper-input-container id="password_container">
<label>Password</label>
<input is="iron-input" id="password" type="password" bind-value="{{passwordInput::input}}">
</paper-input-container>
With bindValue apparently both this.emailInput = null and this.set('emailInput, null) do the trick.
I'm not sure why the first form didn't work (I'm using a paper-input, not iron-input, and it worked there), it's possible the problem is somewhere in the code not shown. But something else to try is directly setting the value:
this.$.email.value = null; // where 'email' is the ID of the iron-input
I'm not entirely sure how this will interact with bind-value, but the docs do say
iron-input adds the bind-value property that mirrors the value
property
You can reset a complete iron-form by calling the reset() method:
document.getElementById('idOfForm').reset();
Related
So I have the required error message showing the input + id that is attached to it in the html
<div class="form-validation">
<input class="modal-input" id="password" type="password" placeholder="Enter your
password">
<p>Error Message</p>
</div>
<div class="form-validation">
<input class="modal-input" id="password-confirm" type="password" placeholder="Confirm your password">
<p>Error Message</p>
</div>
So as you can see, the id's equal password and then password-confirm
Now the problem is I don't know how to create a custom text to change it from saying password-confirm to just saying password without overlapping with the id names.
Here's a picture below of what I mean
And here is the function that I wrote in order to get the "Password-confirm" to display
function getFieldName(input) {
return input.id.charAt(0).toUpperCase() + input.id.slice(1);
}
And here is my function the make sure the required fields show the error message with the getFieldName as the first word in the message
function checkRequired(inputArr) {
inputArr.forEach(function (input) {
if(input.value.trim() === '') {
showError(input, `${getFieldName(input)} is required`);
} else {
showValid(input);
}
});
}
I tried to just target the type on the input instead of the id, but I run into another issue because the input type="text" displays "Text is required" when I want it to say "Username" so I need a method to be able to create any custom word + "is required"
So essentially I could customize it to say "WHATEVER is required"
add a data tag to the html elements you are targeting. and use it do display whatever you require to display.
refer to How to store arbitrary data for some HTML tags for details.
I was watching this video here to create a form in Angular 2 with validation, but I really want to know how this person included the beginning of the url in the input field already. I've followed his same code and can't get the "http://" section to show by default.
This is what I have
<label>Company URL <span class="required">*</span></label>
<input class="form-control" [(ngModel)]="company.company_url" name="url" #url="ngModel" type="url" pattern="https?://.+" id="url" required maxlength="255">
<div *ngIf="companyErrors?.url" class="alert alert-field alert-danger">
{{companyErrors.url}}
</div>
Looks like the company.company_url value had been initialized before component's first render. You may try to do an assignment on the component's constructor:
constructor(/*...*/) {
// ...
company.company_url = "http://";
}
or maybe better on NgInit:
ngOnInit() {
// ...
company.company_url = "http://";
}
Another approach would be utilising placeholder attribute on your input tag.
Something like this
<input class="form-control" [(ngModel)]="company.company_url" name="url" #url="ngModel" type="url" pattern="https?://.+" id="url" required maxlength="255" placeholder="http://">
would render the same effect.
var name = document.getElementById('contact-name'),
email = document.getElementById('contact-email'),
phone = document.getElementById('contact-phone'),
message = document.getElementById('contact-message');
function checkForm() {
if (name.value == '') {
alert('test');
}
}
I was simply trying to make sure everything was working before I began learning actual client-side validation.
Here is the HTML
<form role='form' name='contactForm' action='#' method="POST" id='contact-form'>
<div class="form-group">
<label for="contact-name">First and Last Name</label>
<input type="text" class="form-control" id="contact-name" name="contactName" placeholder="Enter your name.." pattern="[A-Za-z]+\s[A-Za-z]+">
</div>
<div class="form-group">
<label for="contact-email">Email address</label>
<input type="email" class="form-control" id="contactEmail" name="contactEmail" placeholder="Enter Email" required>
</div>
<div class="form-group">
<label for="contact-phone">Phone Number</label>
<input type="number" class="form-control" id="contactPhone" name="contactPhone" placeholder="Enter Phone Number" required'>
</div>
<div class="form-group">
<label for='contactMessage'>Your Message</label>
<textarea class="form-control" rows="5" placeholder="Enter a brief message" name='contactMessage' id='contact-message' required></textarea>
</div>
<input type="submit" class="btn btn-default" value='Submit' onclick='checkForm()'>
</fieldset>
</form>
I took the required attribute off, and if I leave the name field empty it goes right to the other one when i click submit. To check whether javascript was working at all, i did an basic onclick function that worked.
Maybe someone can explain to me what is wrong with the checkForm function. Thanks in advance.
P.S The form-group and form-control classes belong to bootstrap
Change your javascript to this:
var contactName = document.getElementById('contact-name'),
email = document.getElementById('contact-email'),
phone = document.getElementById('contact-phone'),
message = document.getElementById('contact-message');
function checkForm() {
if (contactName.value === '') {
alert('test');
}
}
Okay, Hobbes, thank you for editing your question, now I can understand your problem.
Your code faces three two issues.
Your control flow. If you want to validate your field, you have to obtain its value upon validation. You instead populate variable name when the page loads, but the user will enter the text only after that. Hence you need to add var someVariableName = document.getElementById(...); to the beginning of the checkForm() function.
global variables. Please do not use them like that, it is a good design to avoid global variables as much as possible, otherwise you bring upon yourself the danger of introducing side effects (or suffering their impact, which happens in your situation). The global context window already contains a variable name and you cannot override that. See window.name in your console. You can of course use var name = ... inside the function or a block.
Even if you fix the above, you will still submit the form. You can prevent the form submission if you end your checkForm() function with return false;
For clarity I append the partial javascript that should work for you:
function checkForm() {
var name = document.getElementById('contact-name');
if (name.value == '') {
alert('test');
return false;
}
}
EDIT: As Eman Z pointed out, the part 1 of the problem does not really prevent the code from working as there's being retrieved an address of an object (thanks, Eman Z!),
I have a form that I am trying to pass a JavaScript variable into. The custom hidden field works, but nothing gets passed into it... is there something wrong with the onsubmit code?
Embedded form code:
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email" required>
<input type="hidden" name="REFERID" id="MERGE1" value="">
Here is the JS Code later in the page:
<script type="text/javascript">
function addref() {
var urlref = (document.url);
var refcode = urlref.substring(urlref.indexOf "ref" +4 != urlref.length);
document.mc-embedded-subscribe-form.MERGE1.value = refcode;
}
</script>
Try to use:
document.getElementById("MERGE1").value = refcode;
Can anyone tell me what I am doing wrong? my comparePasswords() is not working...
<script>
function comparePasswords()
{
if (post-form.password.value != post-form.password2.value)
{
$('passwordShow').innerHTML = '';
}
else
{
$('passwordShow').innerHTML = 'Passwords do not match';
}
}
</script>
<form id="post-form" action="signup.php" method="post" >
<input type="password" id="password" name="password" onkeyup="testPassword(this.value);" maxlength="50" size="25" tabindex="102" value="">
<input type="password" id="password2" name="password2" onkeyup="comparePasswords();" maxlength="50" size="25" tabindex="104" value="">
</form>
you need to use
document.getElementById('password').value
and
document.getElementById('password2').value
Also, your logic is wrong. The first conditional block will fire if the passwords do not match.
EDIT
seems you are using jQuery, so simply use
$('#password').val()
to get the field's value.
You should also set the innerHTML using jQuery (may as well) with the html() method
The problem is with how you're accessing the form object.
post-form.password
To the javascript engine, this is the same as this:
post - (form.password)
Also, you'd have to give your form a name attribute (not just an id) to access it that way. If you wanted to access it by name, you'd use something like this:
document['post-form'].password
Or by id:
document.getElementById("post-form");
The test in your if is backwards. The first branch is testing if the two passwords are NOT equal to each other.