I have an input box for a new user to put in a userid. I want to dynamically check if the userid is already taken on-blur. I'm using bootstrap validation for form validation, and I'm having a hard time figuring out how to make it do what I want. In the validation, I have this code currently for userid:
userid: {
container: '#useridMessage',
validators: {
notEmpty: {
message: '*Required'
},
stringLength: {
min:3,
message: 'Username must be at least 3 characters long'
}
}
},
What I want to be able to do in there is call a function I have for the on-blur action:
$scope.userCheck = function () {
userAPIService.getUserDetails($scope.user.username).success( function ( data ) {
if(data.Status == 0){
//make box red and invalid
}
}).error( function ( error ) {
$scope.status = "Error is checking Username availability";
})
}
My backend function is the getUserDetails which is a GET function. I was planning on, as is shown in the code, to check if the userid is a valid one (data.status == 0) already in our system and notify the user after that it is already taken. My desire is to maintain good coding practice and not by pass my bootstrap validation ( which is working well for everything else ) and make both work together, but since bootstrap validation is kind of a black box, I'm not sure how to do this.
Question: How can I get the validation to check some boolean variable, or how can I get the validation to make the backend call and then analyze the result like I want?
Thoughts:
Ideally I'd like to be able to call the onblur function which would set some boolean and then the validation would just look at the validation, but I'm open to any idea to get this right. Thanks
I wonder if creating a custom validation directive would be a good approach. There's a good overview here How to add custom validation to an angular js form, also in the Custom Validation section of the Angular JS Forms documentation. Hope this helps.
Related
I need trigger a specific dialog in ibm-watson conversation, but without ask the user to type something (like a intent). I need to use botkit to init a specific dialog. That's is possible? I'm looking for in all possible documentation and links at Google, but not successfully :/
Sending initial empty message triggers welcome event in the dialog.
To make it do something different, you could set some variable in the context and add condition for that variable to welcome branch in the dialog.
This is how I implemented it in my bot:
function handleHelloEvent(bot, message) {
message.type = 'welcome';
const contextDelta: any = {};
if (message.intent) {
contextDelta.initialIntent = message.intent;
}
//more fields here
watsonMiddleware.sendToWatsonAsync(bot, message, contextDelta).catch((error) => {
message.watsonError = error;
}).then(() => {
//this is the same function which handles message_received events
return handleWatsonResponse(bot, message);
});
}
function handleWatsonResponse(bot, message) {
bot.reply(message, message.watsonData.output.text.join('\n'));
}
controller.on('hello', handleHelloEvent);
controller.on('message_received', handleWatsonResponse);
hello event is specific to webchat/botkit anywhere, you may need to handle different events for different platfoms.
A similar example of code handling welcome event: https://github.com/watson-developer-cloud/botkit-middleware/#dynamic-workspace
(I wrote that one too, so it is a bit too similar).
Dialog example:
I'm building a simple donation app in ReactJS. Here is a working version here:
https://stackblitz.com/edit/react-grzdgz
I've never done form error validation though. So if someone doesn't fill out a field, I'd like an error message to pop up, which says something like "this field must be completed".
I've been trying to follow this tutorial:
https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs
But I'm kinda getting lost, about how I can pass these functions/error messages, into my form, which sits in a seperate module. In the demo, everything sits in one file.
But in my app, my form sits seperately to index.js. So I link to it in index.js.
I'm almost there, I just need some help connecting everything up.
Can anyone help me get form error validation working?
The error handling functions all sit here:
https://stackblitz.com/edit/react-grzdgz
The form itself sits here:
https://stackblitz.com/edit/react-grzdgz?file=components%2FForm.js
And some form errror heres:
https://stackblitz.com/edit/react-grzdgz?file=components%2FFormErrors.js
Any help would be great!
Thank you!
On the submit, I would have a method called: validateFields, which would validate all field like you want (instead of using the default validator of html, which doesn't work on some browser). In the method, I would save all the field with an error.
If the error list (or object) is not empty, you use an alert or popup react-popup
If there are no error, you can call submit method.
Basically, it would look something like:
export default class DumbComponent extends React.Component {
state = {} // all your field value
validateField = () => {
let error = []
//Validate all your field
if (error.length === 0) {
this.submit()
} else {
this.showError() // You decide the way
}
}
render() {
return (
<Form>
<FieldOne />
<Field2 />
<SubmitButton onSubmit={this.validateField} />
</Form>
)
}
}
Hope it answer your question!
I'm trying to write a CasperJS script which does a login at https://frontier.com/login.
I'm having trouble because:
it uses AngularJS so it seems I can't access and change the values held in its scope (eg. ng-model='login.loginId'). Setting the values directly on the elements doesn't have any effect.
the input fields are not wrapped with a form element so using the usual fillSelectors() with CasperJS isn't possible
casper.exists('input#fid-login-inline-username') returns true, but, casper.sendKeys('input#fid-login-inline-username', 'blah') gives an error saying [error] [remote] mouseEvent(): Couldn't find any element matching 'input#fid-login-inline-username' selector
The fields to work with are:
input#fid-login-inline-username
input#fid-login-inline-password
div.login-form-container button.btn-primary - for click()
So, how do I edit the two input fields from casper into the angular scope?
Here is an example of what I've tried:
casper.start('https://frontier.com/login', function() {
this.echo('waiting for password input field');
this.waitForSelector("input#fid-login-inline-password");
});
casper.then(function() {
if (this.exists('input#fid-login-inline-username')) {
this.echo('username input exists');
}
if (this.exists('input#fid-login-inline-password')) {
this.echo('password input exists');
}
this.echo('filling in username and password');
// these fields are not in a form element, so, use sendKeys to enter text...
// the above echoes print the fields exist, and then these sendKeys
// operations emit an error that the fields don't exist.
this.sendKeys('input#fid-login-inline-username', 'some#email.com');
this.sendKeys('input#fid-login-inline-password', 'some-password');
});
casper.then(function() {
this.echo('clicking login button');
this.click('div.login-form-container button.btn-primary');
});
I figured it out. The app is creating two input elements per ID. If I get the second one then I can set the value and trigger an event for AngularJS to see it.
function login(un, pw) {
$($('[ng-model="login.loginId"]')[1]).val(un).trigger('input');
$($('[ng-model="login.password"]')[1]).val(pw).trigger('input');
};
this.evaluate(login, username, password);
I have a parsley-config.js file in which I have successfully added lots of customizations to parsley, utilizing the methods described on Parsley's defaults.js documentation. However I'm having trouble figuring out how to add some attributes to elements upon validation. the classHandler method looked promising but only ran on initialization, not when validating.
Here's a little of the code I'm thinking of using. I just need to know what Parsley method I should stick it in.
var ParsleyConfig = {
mysteryMethod: function(parsleyField) {
var $field = parsleyField.$element;
// Acessibility attributes based on error or not
if (parsleyField.validationResult.length > 0) {
$field.attr({'aria-describedby': parsleyId, 'aria-invalid': true});
} else {
$field.removeAttr('aria-describedby').attr({'aria-invalid': false});
}
...
}
Best is probably to listen to the events field:success and field:error or similar...
I have a case that I want to update the ui based on the user so if a user was log-out and log-in as different user, a score of the user in the ui is changed. The way I thought about doing it is by looking at $rootScope.currentUser.
from my testing it seems like there is some kind of access to the $rootScope, but it is not getting updated on user change (unless I have a bug in my code). here is the relevant code:
$meteor.autorun($scope, function() {
if (null !== $rootScope.currentUser) {
$scope.userForScore = $scope.$meteorObject(Userinfo, {user_id: $scope.getReactively('currentUser')._id});//$rootScope.currentUser._id
}
});
$scope.userScore = function(){
if ($scope.userForScore === undefined || $scope.userForScore.score === undefined) {
return 1;
}
return $scope.userForScore.score;
};
Userinfo - is a collection I created in the server.
Yes it is possible and it works exactly like you did it.
Your problem was unrelated to getReactively, I've created a pull request to your repo to fix it:
https://github.com/Urigo/angular-meteor/issues/415#issuecomment-113925910
You can use Meteor.user() which is a reactive var. No need to add an additional layer of watchers.