I made a form with vuetify,
Name in the form is not required but if the user leave it blank and save the form I want the group to be named Unnamed, maybe if another form is completed, unnamed1, unnamed2 etc...
How can I do it?
In the form I made, it fill the name with unnamed, if I erase , I can named it with the name I like , but if I delete again, it refill with unnamed.
I think there is a better way to do it.
Here is a part of the code I made.
<template>
<v-text-field
v-if="groupName === '' ? groupName = 'Unnamed group' : 'name'"
v-model="groupName"
></v-text-field>
<template>
<script>
export default {
},
data() {
return {
groupName: ''
Try not to have much logic in your template. You can define some method that will handle input change and then you can manipulate how you want with that input:
<v-text-field #change="changeHandler" v-model="groupName">
</v-text-field>
and then in your methods:
methods: {
changeHandler(){
if(this.groupName) {
// do something with this.groupName
} else {
//do something else with this.groupName
}
}
}
Related
I have a meteor helper that uses a reactive variable in a find to get a unique document using an id. My item button template looks like this:
<template name = "itemButton" >
<div class = "itemButton" name = {{_id}}>
{{{title}}}
</div>
</template>
using a reactive variable:
Template.landing.onCreated(function _OnCreated() {
this.f = new ReactiveVar();
this.f.set(false);
const handle = Meteor.subscribe("Feed");
});
now I have a method in a template several itemButton.
Template.landing.events({
'click .itemButton' : function(event, template){
alert(event.target.name);
template.f.set(event.target.name);
}
});
and I would like to use that name in a helper that would use this value as the _id.
Template.landing.helpers({
"GetFocus": function(){
alert(Template.instance().f.get()); // alerts undefined...
return(items.find({'_id':Template.instance().f.get()}));
}
});
So where I expect GetFocus to give me the document that generated the button I don't seem to be so lucky. Let me know if I can provide any additional clarification, and as always your input is appreciated.
Where I have template.f.set(event.target.name); I needed template.f.set(event.currentTarget.getAttribute('data-id')); where the html uses data-id instead of name.
I have a simple sign up form with one input tag that is set up for an email. I'm using abide to validate the email. That works, but I would like to create my own error message and to style elements on the page of my choosing. Is this possible?
I found this which I know isn't validating an email input ( I can't seem to find the code that abide is using to validate emails)
abide: {
validators: {
myCustomValidator: function (el, required, parent) {
if (el.value.length <= 3) {
document.getElementById('nameError').innerText = "Name must have more than 3 characters";
return false;
} //other rules can go here
return true;
}
}
I would assume if I am able to set up a custom validator that just mimics what abidie already does (email validation) then I could change all the elements on the page that I wanted to when the validation comes back false.
I'm not sure what exactly you're asking for but checkout the docs http://foundation.zurb.com/sites/docs/abide.html
So it is a little different now in Foundation 6. Once you initiate Foundation, you will have to overwrite certain properties in the Foundation.Abide object. Like this:
Foundation.Abide.defaults.patterns['dashes_only'] = /^[0-9-]*$/;
Foundation.Abide.defaults.validators['myCustomValidator'] = function($el,required,parent) {
if ($el.value.length <= 3) {
document.getElementById('nameError').innerText = "Name must have more than 3 characters";
return false;
} //other rules can go here
return true;
};
Then in your markup in your form would something like this:
<input id="phone" type="text" pattern="dashes_only" required ><span class="form-error">Yo, you had better fill this out.</span>
<input id="max" type="number" data-validator="myCustomValidator" required><span class="form-error">Yo, you had better fill this out.</span>
You can customize the error messages in the span tags.
My teammates and I are learning AngularJS, and are currently trying to do some simple form field validation. We realize there are many ways to do this, and we have tried
putting input through validation filters
using a combination of controller and validating service/factory
a validation directive on the input element
a directive comprising the label, input and error output elements
To me, the directive approach seems the most "correct". With #3, we ran into the issue of having to communicate the validation result to the error element (a span sibling). It's simple enough to do some scope juggling, but it seemed "more correct" to put the span in the directive, too, and bundle the whole form control. We ran into a couple of issue, and I would like the StackOverflow community's input on our solution and/or to clarify any misunderstandings.
var PATTERN_NAME = /^[- A-Za-z]{1,30}$/;
module.directive("inputName", [
function () {
return {
restrict: "E",
require: "ngModel",
scope: {
fieldName: "#",
modelName: "=",
labelName: "#",
focus: "#"
},
template: '<div>' +
'<label for="{{fieldName}}">{{labelName}}</label>' +
'<input type="text" ng-model="modelName" id="{{fieldName}}" name="{{fieldName}}" placeholder="{{labelName}}" x-blur="validateName()" ng-change="validateName()" required>' +
'<span class="inputError" ng-show="errorCode">{{ errorCode | errorMsgFltr }}</span>' +
'</div>',
link: function (scope, elem, attrs, ngModel)
{
var errorCode = "";
if (scope.focus == 'yes') {
// set focus
}
scope.validateName = function () {
if (scope.modelName == undefined || scope.modelName == "" || scope.modelName == null) {
scope.errorCode = 10000;
ngModel.$setValidity("name", false);
} else if (! PATTERN_NAME.test(scope.modelName)) {
scope.errorCode = 10001;
ngModel.$setValidity("name", false);
} else {
scope.errorCode = "";
ngModel.$setValidity("name", true);
}
};
}
};
}
]);
used as
<form novalidate name="addUser">
<x-input-name
label-name="First Name"
field-name="firstName"
ng-model="firstName"
focus="yes"
model-name="user.firstName">
</x-input-name>
<x-input-name
label-name="Last Name"
field-name="lastName"
ng-model="lastName"
model-name="user.lastName">
</x-input-name>
...
</form>
First, because both form and input are overridden by AngularJS directives, we needed access to the ngModel API (ngModelController) to allow the now-nested input to be able to communicate validity to the parent FormController. Thus, we had to require: "ngModel", which becomes the ngModel option to the link function.
Secondly, even though fieldName and ngModel are given the same value, we had to use them separately. The one-way-bound (1WB) fieldName is used as an attribute value. We found that we couldn't use the curly braces in an ngModel directive. Further, we couldn't use a 1WB input with ngModel and we couldn't use a two-way-bound (2WB) input with values that should be static. If we use a single, 2WB input, the model works, but attributes like id and name become the values given to the form control.
Finally, because we are sometimes reusing the directive in the same form (e.g., first name and last name), we had to make attributes like focus parameters to be passed in.
Personally, I would also like to see the onblur and onchange events bound using JavaScript in the link function, but I'm not sure how to access the template markup from within link, especially outside/ignorant of the larger DOM.
I want show the name in a select input form when I select one of their options.
I create the select like that:
<select ng-model="electionEventId" ng-options="option.value as option.name for option in electionEvents">
</select>
And I catch the selected item value with {{ electionEventId }} but I want the name too of this election without realize another request. ¿Anyone can help me?
Thanks
You can bind the entire object in your model:
<select ng-model="electionEvent" ng-options="option as option.name for option in electionEvents">
</select>
My answer seems to be a little too verbose compared to other answers here, but I hope it helps!
I believe that you will have to traverse the electionEvents looking for the option that has value property equal to electionEventId.
For example, add this function to your controller:
$scope.getElectionEventName = function() {
var name;
angular.forEach( $scope.electionEvents, function( option ) {
// Don't process if the name has already been found
name != null && return;
if ( option.value === $scope.electionEventId ) {
name = option.name;
}
});
return name;
};
I haven't tested it, but I'm pretty sure it works!
Unfortunately there's no how to break the loop, so I put that line in the loop function :)
i try to customize the rule of the JQuery validation plugin and I'm almost done. The only problem I got is that the function $("<%=txtUserl.UniqueID %>").val() return undefined. How can I get the value of that textbox ?
$("#aspnetForm").validate
(
{
rules:
{
<%=txtUser.UniqueID %>:
{
required: true,
remote: "CheckUser.aspx?User=" + $("#<%=txtUser.ClientID %>").val()
}
},
messages:
{
<%=txtUser.UniqueID %>:
{
remote: "Invalid user"
}
}
}
);
And in my webform
<asp:TextBox ID="txtUser" runat="server" TabIndex="1" />
UPDATE
I change to use ClientID instead of UniqueID. Also, I put my javascript code at the end of my file instead of in the beginning of the file.
Now, the problem I got is txtUser.val() return an empty string "". in fact, I notice that it's return the old value of the textbox if I change the value. It's doesn't return the current value, which is want I need...
try txtUser.ClientID instead of UniqueID
$("#<%=txtUser.ClientID %>").val()
Note the # that's missing as well.
Yes use the txtUser.ClientID but also you have to use the (#) to get the value of the text box your statement should be
$("#"+"<%=txtUser.UniqueID %>").val()
if you don't use (#) sign then it will give error
hope this will help