Hi I have created a function object that contains a set of properties.This is what I have:
function LoginModelDTO(data) {
var self = this;
self.UserName = ko.observable(data.UserName).extend({
minLength: {
params: 25,
message: "Username should have at least 25 chars"
},
required: {
message: "Username is required"
},
maxLength: {
params: 50,
message: "Username should not have more then 50 chars"
},
trackChanges: null
});
self.Password = ko.observable(data.Password).extend({
stringLength: {
params: 25,
},
required: {
message: "Password is required"
},
trackChanges: null
});
self.RememberMe = ko.observable(data.RememberMe).extend({
trackChanges: null
});
self.isValid = ko.computed(function () {
var bool = self.FirstName.isValid() &&
self.Username.isValid() &&
self.Password.isValid() &&
self.RememberMe() &&
return bool;
});
}
What I would like is to be able to find a way to iterate over each property and ask if it's valid without writing every property every time because I also have to write a similar structure like self.isValid for hasChanges , revertChanges etc.
Furthermore I will need to create other similar objects to LoginModelDTO that have around 30-35 properties.This will result in alot of code and a bigger javascript file then needed.
Is there any way I can iterate only threw the properties and check if they are valid? isValid should be skipped
eis gave you part of it in the comments, and Misters gave you a part in the answer, but here's it all together:
var allValidatablesAreValid = true;
for (var property in self)
{
if (self.hasOwnProperty(property) && self[property]["isValid"]) {
allValidatablesAreValid = allValidatablesAreValid && self[property].isValid();
}
// You can add an early bail out here:
// if (!allValidatablesAreValid) { break; }
}
WELL for..in statement can help you:
var obj = {
pro1:"hello",
pro2:function(){
//code here
},
etc:function(){
}//...
}
for(var property in obj)
{
if(obj.hasOwnProperty(property))
{
console.log(property)//display the name of the property and of course the access
}
}
And to access to the values of the property you can do this:
for(var property in obj)
{
if(obj.hasOwnProperty(property))
{
console.log(obj[property])//display the value of the property(in case that you need it)
}
}
Since the question was related to the knockout-validation library, I thought I would show how to do this using the library, itself.
self.isValid = ko.computed(function () {
return ko.validatedObservable(self).isValid()
});
See the above link for more information.
Related
The code contains two functions. First one is defined as follows
scope.validateContactName = function() {
scope.address.invalidName = false;
if (!scope.address.name) {
scope.address.invalidName = true;
}
}
which is invoked by the function validateContactName();
Now i have another function
scope.validateContactPhone = function() {
scope.address.invalidPhone = false;
if (!scope.address.phone) {
scope.address.invalidPhone = true;
}
}
which is invoked by the function validateContactPhone();
Instead of two functions, is there a way i can use a single function and do conditional validation?
Something like
validateContactInfo('name');
function validateContactInfo(attr) {
//do validation based on the attribute
// There is only one single piece of code for both conditions
}
Maybe smth like this could work:
scope.validateField = function(field, errorField) {
scope.address[errorField] = false;
if (!scope.address[field]) {
scope.address[errorField] = true;
}
}
Or a shorter version:
scope.validateField = function(field, errorField) {
scope.address[errorField] = !scope.address[field];
}
I would suggest something like this(ES6):
scope.address = [
{
type: "phone",
invalid: false
},
{
type: "name",
invalid: false
}
];
const validate = type => {
let data = scope.address.find(a => a.type === type);
if(!data.type) {
data.invalid = true;
}
};
validate("phone");
validate("name");
Assuming contact information is used in a form to get input from the user. I would recommend to use angular's own form validation
If it is not the case, here is a generic way of checking if values exists in a object. Which you can add in project''s utilities
const contactInfo = {
name: 'My name',
phone: '123123123',
address: ''
}
function validateExistence(obj){
const emptyKeys = [];
for(let key in obj){
if(!obj[key]) emptyKeys.push(key)
}
return emptyKeys
}
console.log(validateExistence(contactInfo));
This code is returning the alert message the number of times models are present in collection. I want to print it just once and come out of the loop as soon as the username and password matches.
what to do?
this.collection.find(function(model)
{
debugger
var user = model.get('username');
var pwd = model.get('password');
if(enteredUsername == user && enteredPassword == pwd)
{
return(alert("success"));
}
else
{
return(alert("failure"));
}
});
Sources of BB
where: function(attrs, first) {
if (_.isEmpty(attrs)) return first ? void 0 : [];
return this[first ? 'find' : 'filter'](function(model) {
for (var key in attrs) {
if (attrs[key] !== model.get(key)) return false;
}
return true;
});
},
¶
Return the first model with matching attributes. Useful for simple cases of find.
findWhere: function(attrs) {
return this.where(attrs, true);
},
so try
console.log(this.collection.findWhere({username: username, password: password}));
I'm using the jQuery Validation plugin for a signup form and trying to check if an email address is already taken as part of the validation. The problem is that the check happens via a promise, and I don't know how (or if) I can make this work with the validation plugin. Here's what I have currently:
$("#signup form").validate({
rules: {
emailSignup: {
email: true,
required: true,
remote: checkAvailable
}
}
});
function checkAvailable() {
var email = $("#emailSignup").val(),
available;
App.isEmailAvailable(email)
.then(function(response) {
available = response;
})
.error(function() {
available = response;
});
setTimeout(function() {
if (available == true) {
console.log("is available");
return true;
} else {
console.log("not available");
return false;
}
}, 100);
}
The setTimeout is just a hacky way to ensure I have the response before I try to log it (I know that's terrible, but it's just for testing).
The thing is, this will correctly log is available or not available depending on the email address I enter, so it works up to that point. But I can't seem to actually return true/false back up to the remote method so that it kicks off the error handling. So what happens is anything that's a syntactically valid email gets marked as valid, even if it's logging not available based on the response.
Is this at all possible?
Update: I also tried doing this in a custom method:
jQuery.validator.addMethod("email", function(value, element) {
var field = this,
available;
App.isEmailAvailable(value)
.then(function(response) {
available = response;
})
.error(function() {
available = response;
});
setTimeout(function() {
if (available == true) {
console.log("is available");
return field.optional(element) || /^[\w-+\.]+#([\w-]+\.)+[\w-]{2,4}$/.test(value);
} else {
console.log("not available");
return false;
}
}, 100);
}, jQuery.validator.format("Please enter a valid email address."));
So the idea here is it would check if the address is available, and if it is, then it would check that it's syntactically valid. Again, it correctly logs is available/not available based on the address I enter, but doesn't return true/false properly to mark the field as valid or invalid.
Based on the "remote" jquery validate rule :
$.validator.addMethod('users_email_exists', function (value, element) {
var method = 'remote';
var previous = this.previousValue(element, method);
var validator = this;
if (!this.settings.messages[element.name]) {
this.settings.messages[element.name] = {};
}
previous.originalMessage = previous.originalMessage || this.settings.messages[element.name][method];
this.settings.messages[element.name][method] = previous.message;
var optionDataString = $.param({data: value});
if (previous.old === optionDataString) {
return previous.valid;
}
previous.old = optionDataString;
this.startRequest(element);
new Promise(function (fulfill) {
// YOUR STUFF, YOUR AJAX GET/POST REQUEST AND URL WITH PARAMS
$.get('/backend/users/ajax/filtered-users-list', {email: value})
.done(function (data) {
// YOUR STUFF TO VALIDATE DATA
// IF VALID TRUE -> validation success
// IF VALID FALSE -> validation failure
var valid = !data.length;
fulfill(valid);
})
}).then(function(valid) {
validator.settings.messages[ element.name ][ method ] = previous.originalMessage;
if ( valid ) {
submitted = validator.formSubmitted;
validator.resetInternals();
validator.toHide = validator.errorsFor( element );
validator.formSubmitted = submitted;
validator.successList.push( element );
validator.invalid[ element.name ] = false;
validator.showErrors();
} else {
errors = {};
message = validator.defaultMessage( element, { method: method, parameters: value } );
// YOUR STUFF, YOUR VALIDATION MESSAGE HERE
errors[ element.name ] = previous.message = 'EMAIL ALREADY ASSIGNED TO AN USER';
validator.invalid[ element.name ] = true;
validator.showErrors( errors );
}
previous.valid = valid;
validator.stopRequest( element, valid );
});
return "pending";
},
"EMAIL ALREADY ASSIGNED TO AN USER"
);
Then call your custom rule :
$("#signup form").validate({
rules: {
emailSignup: {
email: true,
required: true,
users_email_exists: true
}
}
});
Include this script as Promise class reference :
<!-- promise -->
<script src="https://www.promisejs.org/polyfills/promise-7.0.4.min.js"></script>
<script src="https://www.promisejs.org/polyfills/promise-done-7.0.4.min.js"></script>
The function that you've passed to setTimeout() will execute in future (a.k.a asynchronously) - after your checkAvailable() is completed. So its returning value is meaningless for the checkAvailable().
You should do rather the following:
DisableTheForm();
App.isEmailAvailable(value)
.then(function(response) {
$("#signup form").validate();
if( it is valid) {
EnableTheForm();
PostFormData();
}
})
.error(function() {
CryAsItIsNotAvailable();
EnableTheForm();
});
So to do your validation in response of positive feedback of your isEmailAvailable
You cannot use the remote method because it's looking for a URL parameter to access "remotely" via ajax().
You obviously would not call a JavaScript function with ajax(), so using remote to call a JavaScript function makes no sense.
You might be able to create a custom function using the .addMethod() method. However, you will have issues if any part of that is performed asynchronously as the custom rule will be evaluated before you have the result.
Often in a response from a remote API call, I receive nested objects:
var response = {
data : {
users : [
{
name : 'Mr. White'
}
]
}
}
I want to check whether the first user's name is 'Mr. White', and would naturally want to write something like.
var existed = response.data.users[0].name === 'Mr. White'
However I cannot be sure if all the objects are present, so to avoid exceptions instead I end up writing:
var existed = response && response.data && response.data.users && response.data.users[0].name === 'Mr. White'
Is there a nicer way to do this? Another ugly option that comes to mind is:
var existed = false;
try {
var existed = response.data.users[0].name === 'Mr. White';
} catch(e) { }
In addition to vanilla javascript, I usually have underscore.js and jquery available too.
Edit:
Oops, noticed I asked a dupe of javascript test for existence of nested object key.
An interesting option based on those answers is:
var existed = (((response || {}).data || {}).users || [{}])[0].name === 'Mr. White';
You could hide this naughty try/catch block inside a function like this one :
function resolve(root, path){
try {
return (new Function(
'root', 'return root.' + path + ';'
))(root);
} catch (e) {}
}
var tree = { level1: [{ key: 'value' }] };
resolve(tree, 'level1[0].key'); // "value"
resolve(tree, 'level1[1].key'); // undefined
More on this : https://stackoverflow.com/a/18381564/1636522
I would use the try catch approach but wrap it in a function to hide the ugliness.
Instead of a try/catch, this should be done via checking whether each level in the object is defined or not.
go for
if(typeof(response)!="undefined"
&& typeof(response.data)!="undefined"
&& typeof(response.data.users)!="undefined"
&& typeof(response.data.users[0])!="undefined"
&& typeof(response.data.users[0].name)!="undefined"
) {
//executes only if response.data.users[0].name is existing
}
Here is a function which I used in one of my projects http://jsfiddle.net/JBBAJ/
var object = {
data: {
users: [
{
firstName: "White"
},
{
firstName: "Black"
}
]
}
}
var read = function(path, obj) {
var path = path.split(".");
var item = path.shift();
if(item.indexOf("]") == item.length-1) {
// array
item = item.split("[");
var arrayName = item.shift();
var arrayIndex = parseInt(item.shift().replace("]", ""));
var arr = obj[arrayName || ""];
if(arr && arr[arrayIndex]) {
return read(path.join("."), arr[arrayIndex]);
} else {
return null;
}
} else {
// object
if(obj[item]) {
if(path.length === 0) {
return obj[item];
} else {
return read(path.join("."), obj[item]);
}
} else {
return null;
}
}
}
console.log(read("data.users[0].firstName", object)); // White
console.log(read("data.users[1].firstName", object)); // Black
console.log(read("data.test.users[0]", object)); // null
The idea is to pass your path as a string along with your object. The idea was to prevent the throwing of an exception and receive just null as result of the path is wrong. The good thing is that the function works with every path and you don't need to write long if statements.
Im using jQuery's validation which can be found here: http://docs.jquery.com/Plugins/Validation/rules#.22add.22rules
I currently have some of my 'custom' rules set up like so:
else if(valID =="#shipForm")
{
$("#fName").rules("add",{regexName: "^[a-zA-Z]+(([\'\-][a-zA-Z])?[a-zA-Z]*)*$",minlength: 2,messages:{minlength:"Must be 2 characters."}});
$("#lName").rules("add",{regexName: "^[a-zA-Z]+(([\'\-][a-zA-Z])?[a-zA-Z]*)*$",minlength: 2,messages:{minlength:"Must be 2 characters."}});
$("#sAdd1").rules("add",{stringCheck: "",minlength:2,messages:{minlength:"Enter your complete street address."}});
$("#sAdd2").rules("add",{stringCheck: ""});
$("#city").rules("add",{stringCheck: "",minlength:2,messages:{minlength:"Enter the full name of your city"}});
$("#zipcode").rules("add",{stripZip: ""});
$("#phoneIn").rules("add",{stripPhone: "",maxlength:15,messages:{maxlength:"Phone number exceeds allowed length"}});
$("#altPhone").rules("add",{stripPhone: ""});
$("#state").rules("add",{checkMenu: ""});
$("#country").rules("add",{checkMenu: ""});
}
What I was hoping to do.. is abstracting the .rules out and being able to grab them from a function. My issue is that they are not just strings, so im lacking an idea of how i could bring info from another function and populate the .rules("passed value of rule")
This doesnt work but this is an example of something i was kinda hoping for
function getRule(rule)
{
switch (rule)
{
case "fName":
return "\"add\",{regexName: \"^[a-zA-Z]+(([\'\-][a-zA-Z])?[a-zA-Z]*)*$\",minlength: 2,messages:{minlength:\"Must be 2 characters.\"}}";
break;
}
}
But I obviously cant just pass a string back and run it back into the .rules.
Any idea's?
You could return an object
function getRule(rule)
{
switch (rule)
{
case "fName":
return {
param1 : "add",
param2 : {
regexName: "^[a-zA-Z]+(([\'\-][a-zA-Z])?[a-zA-Z]*)*$",
minlength: 2,
messages:{
minlength:"Must be 2 characters."
}
}
};
}
}
now if you call getRule it will return an object like this
var myruleDef = getRule(rule);
$(selector).rules(myruleDef.param1, myruleDef.param2);
You can store your rules in a map:
var rules = {
fName: {
regexName: "^[a-zA-Z]+(([\'\-][a-zA-Z])?[a-zA-Z]*)*$",
minlength: 2,
messages: {
minlength: "Must be 2 characters."
}
},
lName: { // ... }
// ...
};
And apply all of them with:
for (var id in rules) {
$("#" + id).rules("add", rules[id]);
}
Note: You don't need a break after a return.
Note2: Wrap and indent your object literals for readability.