Someone can tell me why my code doesn't work please ??
I get "this.username is undefined" and i don't really understand why...
Here the code :
riot.tag2('test', '<input type="text" name="username" placeholder="username" oninput={validate} value="" /> <h4>{username_valid}</h4>', '', '', function(opts) {
this.validate = function(e) {
this.username_valid = (this.username.value.length > 3) ? 'Valid' : 'Invalid'
};
});
Thanks for your help..
Just because it's so hard to read, I hope you're not actually writing the component using the riot API. I transcribed it into a tag so we can have a better look:
<test>
<input
type="text"
name="username"
placeholder="username"
oninput={validate}
value=""/>
<h4>{username_valid}</h4>
<script>
this.validate = function(e) {
this.username_valid = (this.username.value.length > 3) ? 'Valid' : 'Invalid'
}
</script>
</test>
You're trying to get username from the input element. this in a tag refers to the scope of the script, not the DOM elements. There are a few ways you can get the input value
Add ref='username' to the <input> tag.
Then use this.refs.username.value to get the value from a ref
In the validate function, use e.target.value to get the element from the oninput event
Use this.root.querySelectorAll('input')[0].value for a scoped DOM query
Related
I have the WC <m-form> witch is the wraper for my form and the input fields.
In the renderHTML() of m-form i do this:
renderHTML() {
this.loadChildComponents().then(children => {
Array.from(this.root.querySelectorAll('input'))
.filter(i => i.getAttribute('type') != "hidden").forEach(input => {
const label = this.root.querySelector(`label[for=${input.getAttribute("name")}]`)
const aInput = new children[0][1](input, label, { namespace: this.getAttribute('namespace') || ''})
aInput.setAttribute('type', input.getAttribute('type'))
input.replaceWith(aInput)
})
})
}
This wraps <input> and <label> in an <a-input> WC.
But when I want to do the same with
<input type="radio" id="gender1" name="gender" value="herr">
<label for="gender1">Herr</label>
<input type="radio" id="gender2" name="gender" value="frau">
<label for="gender2">Frau</label>
they are not in a group.
What can i do to get them grouped together but also in the <a-input>?
Here is the Code on the site and what got rendered out.
shadowDOM encapsulates CSS, HTML and behavior
Both you inputs are in shadowDOM. That is like putting them into 2 different IFRAMEs.
They have no clue another input exists
Remove shadowDOM
or, loads more work, add Events to make the inputs communicate with each other
Using Vee-Validate, when using a custom validator along with the confirmed rule, the confirmed rule always fails validation. The custom validator is specified on the input field being confirmed like so:
<input type="password" placeholder="Password" data-vv-as="password" v-model="password" name="password" v-validate="'required|min:8|has_upper'" />
<input type="password" placeholder="Password" data-vv-as="confirm" v-model="confirmPassword" name="confirmPassword" v-validate="'required|confirmed:password'" />
Here is my Vue instance:
(function (Vue, VeeValidate) {
VeeValidate.Validator.extend('has_upper', {
getMessage: function (field) {
return 'The ' + field + ' must contain an upper case letter';
},
validate: function (value) {
return /^(?=.*[A-Z]).+$/.test(value);
}
});
Vue.use(VeeValidate);
var enroll = {
el: "#app",
data: {
password:'',
confirmPassword: ''
}
}
var app = new Vue(enroll);
})(Vue, VeeValidate)
The custom validator for the password field is triggering as expected, however, as mentioned the confirmed rule is always failing for the confirm password model.
Recently in Vee-Validate (2.1.0 and greater), they've changed how parameters work for these. Now, the target of confirmed has to be a ref, so this will work:
<input type="password" ref="password" name="password" v-validate="'required'" />
<input type="password" v-model="confirmPassword" name="confirmPassword" v-validate="'confirmed:password'" />
The only change you really need to make is to add ref="password" to your password input.
See here for the author talking about this change: https://github.com/baianat/vee-validate/issues/1415
So far I don't see any changes in the documentation, but I assume it will come.
Working example: https://codesandbox.io/s/km4lw12823
I am using Polymer for a short time and now i want to get the value of a paper input. I don't know how can I do this.
This is not working:
this.form.password
I want to get the Value of this field:
<paper-input label="Password" type="password" id="password" name="password" size="25" value=""></paper-input>
I also want get the Input for submitting of the e-mail input:
<paper-input label="Login" id="email" name="email" size="25" value=""></paper-input>
For submitting I am using:
<paper-button raised value="Login" type="submit" onclick="formhash(this.form, this.form.password);">Login</paper-button>
With normal input fields is this working.
You can use document.querySelector('#password').value to get the value of paper-input with id password in the formhash() function call or inside the function definition.
You can also use polymer's Automatic node finding to get value of an element using its id. In which keep the form/input in custom-element and use this.$.password.value to get the value of an element with id password. Like this
<!-- create a custom component my-form -->
<dom-module id="my-form">
<template>
<form is="iron-form" id="form" method="post">
<paper-input name="name" label="name" id="name"></paper-input>
<paper-button raised on-click="submitForm">Submit</paper-button>
</form>
</template>
<script type="text/javascript">
Polymer({
is: "my-form",
submitForm: function() {
alert(this.$.name.value);
if(this.$.name.value != "") // whatever input check
this.$.form.submit();
}
})
</script>
</dom-module>
<my-form></my-form> <!-- use custom-component my-form -->
If you don't want to use <form> you can also simply store the paper-input values in instance variables and use them later wherever you want.
All you have to do is store the input inside a value like this:
<paper-input label="Password" type="password" id="password" name="password" size="25" value="{{valueNameToStore}}"></paper-input>
And later access it like this:
var myPassword = this.valueNameToStore;
Using <form is="iron-form"> allows you to use <paper-input> and other input elements in forms https://elements.polymer-project.org/elements/iron-form
<form is="iron-form" id="form" method="post" action="/form/handler">
<paper-input name="name" label="name"></paper-input>
<input name="address">
...
<paper-button raised onclick="submitForm()">Submit</paper-button>
</form>
function submitForm() {
document.getElementById('form').submit();
}
or, sometimes you can try this.$.password.value to get the value for password.
Question:--
I am using following HTML code showing error message using tool tip whenever length of Textbook equal to zero,
but i couldn't set my defined message inside tool tip.
<body class="claro">
<form action="">
Enter Name:--
<input type="text" name="firstname" data-dojo-props="" data-dojo-type="dijit.form.TextBox"
trim="true" id="firstname" propercase="true">
<button id="button4" data-dojo-type="dijit.form.Button" type="button">Submit
<script type="dojo/method" event="onClick" args="newValue">
alert("Value selected is: "+newValue);
var firstNameId=dijit.byId("firstname").value;
alert('firstNameId.length:----'+firstNameId.length);
if(firstNameId.length==0)
{
var textBox = dijit.byId("firstname");
dijit.showTooltip(
textBox.get("invalidMessage"),
textBox.domNode,
textBox.get("justMessage"),
!textBox.isLeftToRight()
);
}
else
{
alert('wrong');
);
}
<br>
Help me out....
It's been a while since you posted this question, but if you still need it, here's an answer.
Dijit/form/TextBox doesn't have a showTooltip method. To show a tooltip you can instead call something like:
var textBox = dijit.byId("firstname");
textBox.invalidMessage = "Whatever you want";
Tooltip.show(textBox.get("invalidMessage"),
textBox.domNode, textBox.get("tooltipPosition"),
!textBox.isLeftToRight());
Be sure to include dijit/Tooltip!
I have searched high and low for solution for this but I have not been able to find anything. I am playing around with the dojo ValidatationTextBox dijit. I have tried to both declarative and programmatic methods and every time it comes up as a readonly input field. The code provided shows my attempt using the declarative method. I got the exact same result using a programmatic route similar to the "new textbox" calls below. In both methods the html for the ValidatationTextBox is generated with two child divs. One with class=dijitReset dijitValidationContainer and one with class=dijitReset dijitInputField dijitInputContainer. It is the later class that holds all of the html input and dijit properties and the former that defines the form as readonly and also gives it a value of 'x'. What am I doing wrong? Any help or explanation regarding why this is not working will be much appreciated. Thanks
<script>
require(["dojo/parser", "dijit/form/TextBox", "dijit/form/ValidationTextBox","dojo/domReady!","dojox/validate","dojox/validate/web"],
function(parser, textbox, ValidationTextBox,validate){
parser.parse();
new textbox({
id: "fName",
maxlength: 25,
name: "fName",
trim: "true",
propercase: "true"
}, "fName");
new textbox({
id: "lName",
maxlength: 25,
name: "lName",
trim: "true",
propercase: "true"
}, "lName");
});
</script>
</head>
<body class="tundra">
<h3>Sign-up for our great offers:</h3>
<form id="registration_form">
<div class="grouping">
<label for="fName">First Name:</label>
<input id="fName" /><br />
<label for="lName">Last Name:</label>
<input id="lName" /><br />
<label for="email">Your Email:</label>
<input type="text" name="email" required="true" readonly="false"
data-dojo-type="dijit/form/ValidationTextBox"
data-dojo-props="regExp:'[a-z0-9._%+-]+#[a-z0-9-]+\.[a-z]{2,4}', invalidMessage:'Please enter a valid e-mail address'" /><br />
<button id="btn">Sign Up!</button>
</div>
</form>
</body>
I think the problem may be with your regExp however you can write a keyup function and call it when the user types it will validate the email address using Dojo's built in email validation. Also for your fname and lname fields try setting required = "true". You can do this to implement on the fly validation since if your fields are not required you need to call validation on your form when you post. You can refer to this Form Validation Fiddle
HTML
<input type= "text" name ="email" data-dojo-type="dijit/form/ValidationTextBox" missingMessage="Email Address Required" invalidMessage="Invalid Email Address" onkeyup="validateMe(this.value);" required="true" />
js
function validateMe(email){
var isValid = false;
isValid = dojox.validate.isEmailAddress(email);
return isValid;
}