Hello Devs I am a fresher and I am currently working on a task. In that I have used 3 forms inside single form so I can validate the object of objects but when I try to validate them in nested manner the only the first form was validating. Can anyone give me some advices to solve this problem ? And this above pic is the code I have used to validate the nested forms but only 1st form is validating.
I agree with the comments that say you should not submit a picture of text, and you need to supply a minimal reproducible example. Without that, a specific error can't be pinpointed.
However, here is some general feedback. One issue is that deeply nested code is not clean code. In my opinion you should divide the logic into smaller chunks and write it in a more linear structure to make it easier to troubleshoot. You could have computed properties like this:
bankDetailsValid(){
// bank details validation here
},
employeeDetailsValid(){
// employee details validation here
},
# more specific validation can be in more computed properties
allFieldsValid(){
// return this.bankDetailsValid && this.employeeDetailsValid # can add
// whatever checks are needed here to determine if the form as a
// whole can be submitted
},
errorMessage() {
if (!this.bankDetailsValid) {
return "Bank details error"
}
if (!this.employeeDetailsValid){
return "Employee details error"
}
# more error messages would go in if-statements here. Then you would return a default error:
return ""
}
Also keep in mind that "formValidation" suggests that your function is doing more than one thing, because it is both determining if the form is valid AND determining what the error message is. That's overly complex, so it leads to dirty code. The code will be easier to read and debug if one function does one thing.
Related
Can Anyone explain please why did we write ": [ ] " in line 10. I believe it is the simplest way to write but what exactly is this, can anyone give another example of this to understand please?
you need to look at lines 9 and 10 together. It's just a ?: conditional operator.
If there are errors - use helper function (it probably flattens various error messages, page level, field level, duplicate rules etc) to get 1 simple error message.
Else return an empty array.
I'm evaluating using JSON Schema for validating form data.
I can use it to validate my form data when you click submit using AJV and then check it again on the server using a PHP implementation of JSON Schema.
That part sounds great, but I'm trying to figure out how I would use it for real-time validations -- i.e., validation as you're filling out the form/typing.
Specifically, I can run the entire validator on every keystroke, but it seems expensive to validate the whole form when only one input has changed. In particular, any AJAX-based validations (such as a username uniqueness check) would fire too frequently.
Has anyone used JsonSchema for this purpose? Is it feasible? How would I fine-tune AJV or another JsonSchema implementation to only run the validators that are necessary on input?
Integrating this with the client will depend heavily on what you're using on the client side. I'm working on a project using this with dynamically created forms in Angular 2+ and AJV and it is working really well.
It will also depend on how much of JSON Schema you're using. For example, I want my forms to be able to use $data references so that validity of one input can depend on the value of other inputs. This basically means I have to validate on any change in the form since there's not an effective way to tell what value is the target of a $data reference.
Also, if there's any potential for your model data to change outside of the user interacting with the form (e.g., new data being pulled from the server from other users, etc.) it is much more resilient to validate the schema and model in its entirety.
In general even on my more complicated forms with up to 30-40 input values ajv takes less than 10ms to validate the entire form including a function of my own to match ajv's errors to my inputs for display. So I wouldn't worry about the performance hit.
Edit: As for the async validators adding a debounce of some sort will depend on what you're using client side, but shouldn't be too hard and AJV's documentation is really complete.
Edit: Here's the loop I have the errors go through to match them and clean them up a little (most of AJV's errors are user readable, but a few like pattern matching need some help rather than spitting out a regex at the user):
errs.forEach((err) => {
// Is this a value that is being matched to another input?
if (err.dataPath === dataPath && err.keyword === 'const' && err.schema.$data) {
return messages.push('Does not match')
}
// Don't show regex to people.
else if (err.dataPath === dataPath && err.keyword === 'pattern') {
return messages.push('Not valid format')
}
// Is the keyword 'required' and the parentPath is a match and the property is matched to err.params.missingProperty
else if (err.keyword === 'required' && err.dataPath === parentPath && err.params.missingProperty === propertyName) {
return messages.push('Required')
}
// Is the dataPath a match and no other special criteria apply
else if (err.dataPath === dataPath) {
// Cap first letter
return messages.push(err.message.charAt(0).toUpperCase() + err.message.slice(1))
}
})
I'm trying to deny a question to be submitted if it has a length of 0. But I don't quite understand Meteor deny.
Here's what's going on.
I am updating the question. It is currently set at "yes"
I update it to "yessir"
I console log it as follows:
Questions.deny({
update: function(userId, question) {
console.log(question.question.length);
}
});
but the result is 3. It seems to console log the field being updated, not what I am updating it TO.
This is a problem because how can I check the length of an input if this thing won't check it when it's being submitted.
Can someone enlighten me?
Have a look at the docs and you'll see that the 2nd argument to update is doc:
doc is the current version of the document from the database, without the proposed update
The only way to validate the length of question is to look at the 4th argument - modifier. The problem with this approach is that you must check the modifier for every possible way it could be modified. Fundamentally, this is why allow/deny is really hard to implement in all but the most simple cases.
Instead, I'd strongly suggest either using collection2 to enforce your schema or using methods to modify your documents.
Recommended reading:
Meteor method vs. deny/allow rules
Allow & Deny: A Security Primer
Collection.deny Function either returns true or flase.
If you want to deny update on certain criteria here goes your code like this
Questions.deny({
update: function(userId, question, fields, modifier) {
// check for critera
if(fields.question.length < 0)
return true // denys update for question length less than 0
else
return false // deny = false means allow = true
}
});
I have a picture quiz with a single input field for each image. I need a way to check if the value entered into the input field matches the correct answer and if it does, perform a few operations like add/remove a few CSS classes and increase the score count. And I need this to be done in real time using AJAX.
This is the pseudo-code for the functionality that I want...
if input value == correct answer {
some jQuery to add/remove a few classes
some PHP (I assume) to add 1 to the score count
} else {
some jQuery to add/remove a few classes
}
However, how do I get the value of the input field in real time? Do I still use PHP Post to get the value? What AJAX do I need to do this without a page refresh?
Any help would be greatly appreciated... I'm okay with PHP but very little experience with AJAX. Thank you.
yes this can be done with AJAX, and with jquery (which is not the same).
You can get input string with $("#input_id").val() , show a simple error message with alert("my message"), and use the onchange event. see also what is e.preventDefault() to make the form not submitable if all is not correct
If you want to check if datas are correct with a php request, that's also possible with $.ajax()
See jquery documentation on the web for further information about all theses functions
In case this is useful for anyone else, this is how I achieved my original goal. Contrary to what I first thought, this can all be done using JS and does not require PHP or AJAX to update in real time.
$('input').keyup(function () {
if (($(this).val() == 'test') {
//Stuff
} else {
//Other Stuff
};
});
The .keyup() function is what allows this to work in real-time, as it is called whenever a key is hit on your keyboard.
Then within this, the .val() function is what is used to check the actual user-entered value of the input field. In this case, if this value equals 'test', then it performs whatever you place in the if statement.
Hope that helps if anyone has stumbled across this question hoping for this answer!
I have updated jade to latest version, and started seeing this message in console
You should not have jade tags with multiple attributes
It is mentioned as feature, here
0.33.0 / 2013-07-12
Hugely more powerful error reporting (especially with compileDebug set explicitly to true)
Add a warning for tags with multiple attributes
and I see it in the code.
https://github.com/visionmedia/jade/blob/a38aa552f6f53554ac5605299b6b8c7e07cbdf1f/lib/parser.js#L662
But, what does it really signify. When will I get this warning. For example, when will I get error based on the below code (It works without warning, but to like to know when will I get error so that I can compare with my code)
mixin link(href, name)
a(class=attributes.class, href=href)= name
a(href=href, attributes)= name
+link('/foo', 'foo')(class="btn")
Multiple "attributes" doesn't mean what you probably think it means. It's not an HTML attribute as we know it, but a token of type "attribute".
Example:
a(href="#WAT").some-class(title="WAT")
Note how I have two attribute sections, each with one attribute.
Better put them in one attribute section:
a(href="#WAT", title="WAT").some-class
(I found this question through googleing this warning as one of the first results because I wanted to get rid of it ...)
The accepted answer above did not help me in the following case, but it shows how one can get rid of the warning without loosing the attributes functionality
(it does not provide an answer to why it works this way):
// using mixins similar to +link(param1,param2) above where 'data' and 'class'
// below are not named mixin params
// OK (without a warning):
+link("foo", data="true")(class="bar")
// WARNING is shown:
+link("foo")(class="bar")(data="true")
// ERROR on compiling:
+link("foo", class="bar", data="true")
(I'm sorry to create so much misunderstandings as shown in the comments below and hope my last edit here clarifies it to be a valid, although slightly more general, answer/help for those docpad warnings)