I have the following code:
JS
.if(() => { return this.HasProvidedEitherSku1OrSku2 === false })
.isNotEmpty().withMessage(‘at least one sku is required')
.hasLengthBetween(0, 50)
.endIf()
.ensure('Sku2', (config) => {config.computedFrom(['Sku1'])})
.if(() => { return this.HasProvidedEitherSku1OrSku2 === false })
.isNotEmpty().withMessage(‘at least one sku is required’)
.hasLengthBetween(0, 50)
.endIf();
HTML
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">SKU</label>
<input disabled.bind="readonly" type="text" class="form-control" value.bind="Sku1">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label"> SKU</label>
<input disabled.bind="readonly" type="text" class="form-control" value.bind="Sku2">
</div>
</div>
withMessage seens to react differently when contained within an if statement. rather than adding a 'has-warning' to the form-group. It just adds:
<p class="help-block **aurelia-validation-message**">at least one sku is required</p>
How do I force a 'has-warning'? Or have something close to an if statement. If p class = "" then grab label above and input below.
Related
I want to play with this fields,i want to insert description1,description2 data into this description[] how to do that i tried but something is missing.
<div class="form-group row">
<label for="description" class="col-md-4 col-form-label">Description</label>
<div class="col-md-8">
<input type="text" class="form-control" name="description[]" placeholder="Enter description">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-md-4 col-form-label">Description 1 (optional)</label>
<div class="col-md-8">
<input type="text" class="form-control" name="description2" placeholder="Enter description">
</div>
</div>
<div class="form-group row">
<label for="description" class="col-md-4 col-form-label">Description 2 (optional)</label>
<div class="col-md-8">
<input type="text" class="form-control" name="description3" placeholder="Enter description">
</div>
</div>
public function store(Request $request)
{
$description1 = $request->input('description1');
$description2 = $request->input('description2');
$products = new ProductAdd;
$prodduct->name = $request('name');
$prodduct->description[] = [
'description1' => $description1;
'description2' => $description2;
];
$product->save();
}
If you cast the description field to be an array in your model, you can update your controller code to:
$prodduct->description = [
'description1' => $description1;
'description2' => $description2;
];
To cast the field to an array, add this to your ProductAdd Model:
$casts = [
'description' => 'array'
];
I am using the below code, and my problem is that when I select the first time then the location list is not loading. When I select the second item then the first item in the sublist gets populated. If I select third then the second subitem gets populated.
I'm sure I'm making a silly mistake somewhere.
<div class="form-group">
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-5">
<label for="">SELECT CLIENT</label>
<select type="search" id="myarray" class="select2-select req selectpicker form-control" data-required="1" data-max-options="1" data-live-search="true" multiple="" name="myarray[]" title="Select a Client">
<?php echo $Clients; ?>
</select>
</div>
</div>
</div>
<script>
jQuery(".select2-select").change(function() {
var selected = $(this).val();
$(".selectpicker").selectpicker();
$.ajax({
url: "<?php echo base_url(); ?>login/getDataFromLocation",
data: {
type: 'select',
selected: selected
},
type: 'post',
success: function(output) {
if (output) {
//$('#append').append(output);
$(".selectpicker").selectpicker();
$('#multiple').selectpicker('refresh').empty().append(output);
}
}
});
});
</script>
<div class="form-group">
<div class="row">
<div class="form-group col-md-5">
<label for="multiple">LOCATION</label>
<select id="multiple" class="form-control req selectpicker select2-select" data-required="1" name="Location[]" title="Select a Location" multiple></select>
</div>
</div>
</div>
Problem has been resolved and the problem was refreshing the value from list.
$("#creatives").selectpicker('refresh').empty().append(output).selectpicker('refresh').trigger('change');
Used .trigger('change')
Thanks a lot for everyone's input here.
I'm trying to use ng-blur. Below is my HTML code:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName()" ng-model="QueryName" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
JavaScript code for blur event call is:
$scope.performValidationQueryName = function () {
if($scope.QueryName != null && $scope.QueryName != '') {}
};
The issue I'm facing is:
When ng-if="CurrentStage==='SaveQuery'" is there inside div, my ng-model="QueryName" is not getting updated. And with blur of the text, I get $scope.QueryName = "" with performValidationQueryName function.
If, I remove ng-if="CurrentStage==='SaveQuery'", all things works perfectly and I get the value inside the $scope.QueryName.
How can I call ng-blur which is placed inside the div with an ng-if condition?
You should use object in your input model will solve your problem because it comes under ng-if as shown below,
Template:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName(Query.Name)" ng-model="Query.Name" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Controller:
$scope.performValidationQueryName = function (queryName) {
if (queryName != null && queryName != ''){
//do something..
}
};
In my project on the user edit page I would like to show the current role,wich i get by findOne byId,but I would also like to get all available roles so that I can choose, roles are in a separate collection, and I dont have a problem when displaying eather one...or all..
<div class="form-group col-lg-12">
<label>Email</label>
<input type="email" class="form-control" id="email" value="{{emails.[0].address}}">
</div>
<div class="form-group col-lg-12">
<label>Password</label>
<input type="password" name="" class="form-control" id="password" value="{{password}}">
</div>
<div class="form-group col-lg-6">
<label>Name</label>
<input type="text" name="" class="form-control" id="firstname" value="{{profile.name}}">
</div>
<div class="col-xs-12"><strong>Current role:</strong>
<label class="radio-inline">
<input type="radio" name="optradio" id="accountRole" value="{{roleName profile.role}}" checked>{{roleName profile.role}}
</label>
</div>
{{/with}}
<div class="col-xs-12">
<form>
<div class="col-xs-12"><strong>Roles:</strong>
{{#each rolesInformation}}
<label class="radio-inline">
<input type="radio" name="optradio" id="accountRole" value="{{_id}}">{{roleName}}
</label>
{{/each}}</div>`
helpers look like this:
Template.editUser2.helpers({
user: () => {
return Meteor.users.findOne({_id:Session.get('id')});
},
playerInformation: () => {
return Players.find().fetch();
},
roleName: (id)=>{
return Roles.findOne({_id:id}).roleName;
},
rolesInformation: () =>{
return Roles.find().fetch();
},
when i run roleName or rolesInformation separateli it works fine...
whet both included i get "roleName not defined"
I want to create a custom field validation for forms using Meteor. I don't want a packaged solution.
Here is my code so far.
JavaScript:
var errorState = new ReactiveVar;
Template.lottoForm.created = function() {
errorState.set('errors', {});
};
Template.lottoForm.events({
'blur input': function(e, t) {
e.preventDefault();
validate($(this));
}
});
Template.lottoForm.helpers({
errorClass: function (key) {
return errorState.get('errors')[key] ? 'has-error' : '';
}
});
Template.errorMsg.helpers({
errorMessages: function(key) {
return errorState.get('errors');
}
});
function throwError(message) {
errorState.set('errors', message)
return errorState.get('errors');
}
function validate(formField) {
$("input").each(function(index, element){
var fieldValue = $(element).val();
if(fieldValue){
if(isNaN(fieldValue) == true) {
throwError('Not a valid Number');
}
}
});
}
HTML:
<template name="lottoForm">
<form class="playslip form-inline" role="form">
<fieldset>
<div class="form-group {{errorClass 'ball0'}}">
<input type="text" class="input-block form-control" id="ball0" maxlength="2" name="ball0">
</div>
<div class="form-group {{errorClass 'ball1'}}">
<input type="text" class="input-block form-control" id="ball1" maxlength="2" name="ball1">
</div>
<div class="form-group {{errorClass 'ball2'}}">
<input type="text" class="input-block form-control" id="ball2" maxlength="2" name="ball2">
</div>
<div class="form-group {{errorClass 'ball3'}}">
<input type="text" class="input-block form-control" id="ball3" maxlength="2" name="ball3">
</div>
<div class="form-group {{errorClass 'ball4'}}">
<input type="text" class="input-block form-control" id="ball4" maxlength="2" name="ball4">
</div>
<div class="form-group {{errorClass 'ball5'}}">
<input type="text" class="input-block form-control" id="ball5" maxlength="2" name="ball5">
</div>
{{> errorMsg}}
<div class="play-btn">
<button type="submit" value="submit" class="btn btn-primary">Play Syndicate</button>
</div>
</fieldset>
</form>
</template
<template name="errorMsg">
<div class="errorMsg">
{{#if errorMessages}}
<div class="list-errors">
{{#each errorMessages}}
<div class="list-item">{{> fieldError}}</div>
{{/each}}
</div>
{{/if}}
</div>
</template>
<template name="fieldError">
<div class="alert alert-danger" role="alert">
{{errors}}
</div>
</template>
I'm also getting this error message in the console - "Uncaught Error: {{#each}} currently only accepts arrays, cursors or falsey values."
Why do I get this error and how would I implement the custom validation?
Just as the error says, #each template functions must be passed the proper type. Are you sure your errorMessages helper is returning an array? It looks like you are initializing it as a hash.