I am using angular-schema-form, and ran into a problem that when I load a schema and a form from a server using REST, the validation sometimes did not kick in. I could post a schema even though some fields were required.
How can I always be sure that the required fields in the form has to be filled in by the user before posting?
I found that using $scope.$broadcast('schemaFormValidate'); before submitting the form works (from the docs).
$scope.onSubmit = function(form) {
// First we broadcast an event so all fields validate themselves
$scope.$broadcast('schemaFormValidate');
// Then we check if the form is valid
if (form.$valid) {
// ... do whatever you need to do with your data.
}
}
However, we can not disable any buttons beforehand.
#John you can set a value in your model that is part of a display condition. That allows you to hide the buttons on submit and then re-enable them when you are ready for the user to submit the form again for any reason.
Related
I added a code injection in Squarespace to block specific email. If user inputs email, submit button will be disabled. I added recaptcha before and didn't work so I decided to block the specific email. But I still get same spam email from same email used in my contact form. Is there any other way to fix this?
I get the same experience posted here: https://www.signal-arnaques.com/en/scam/view/260546
One possible explanation is that the submit button is not being used to submit the form (it could be submitted programmatically or by other means). You could use JavaScript to add an event listener to the 'submit' event and, within that, prevent the form from being submitted based on your comparison logic. It'd look something like:
var myForm = /* Get the form element. */;
myForm.addEventListener("submit", function(e) {
var emailAddress = /* Get the value of the field */;
if (emailAddress == "info#domainworld.com") {
e.preventDefault();
}
});
Of course, because it's client-side JavaScript, it's entirely possible that the bot could work around this as well.
I have a login form that has a username and password. Both are required to trigger other form elements.
However, in chrome if the password is saved, form.$invalid returns true and the digest doesn't re-run when the saved information gets added. Is there any way to require fields being saved and set by the browser and have angular re-check form.$valid?
Surprisingly, I was facing a similar problem some time back. The trick is to get the browser to fire input events for things that may have been filled in by chrome autofill (but haven't updated).
If you have a submit or click handler for the form submission, you can trigger the input event on all your inputs so that angular will pick up the changes by autofill.
You may do something like this
var app = angular.module('app',[]);
app.run(function() {
// Trigger input event on change to fix auto-complete
$('input, select').on('change',function() { $(this).trigger('input'); });
});
to fire input event on all inputs.
Here's the original github issue related to your problem.
I have form split in two tabs and submit button is present on the second tab.Elements in both the tabs are present enclosed within same form tag and share same "ng-controller".Problem is I can submit the form without filling form elements in the first tab and it shows error scope object is undefined.How do I validate the form elements in this case and save the scope data on pressing submit.Any suggestions would be of great help.
With regards to your validation problem, you'll want to validate that each required field has been filled-out correctly before acting on the submit. What I would do: instead of the submit button directly calling the submit functionality, it would call a function that checks for all the necessary values on the scope, and if it works, then it calls the submit function.
With regards to saving the data, you'll either want to save it to a db or store it temporarily in a service.This is a pretty good tutorial on services: http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
There's one field in the form which has strict format (validator is already in place).
How to make form submit automatically in AngularJS as soon as it becomes valid?
I am assuming you are talking about ajax post of form data (model data).
You can do a $watch on the $valid property of a form field and submit the form as soon as it becomes true.
See my fiddle here
Something like
$scope.$watch('myForm.userName.$valid',function(newValue,oldvalue) {
if(newValue) {
alert('Model is valid');
//Can do a ajax model submit.
}
});
You can get mode details from the form directive documentation
I'm creating a web client that works with a settings web API with angular.
There are a lot of settings and they are all optional. If I send a setting, it should be saved. Settings that are not sent should not change.
The requirement is to have one Save Changes button for all the settings.
I wonder if there is some way in Angular to implement this.
I thought about not using HTML form and collecting the data and creating an ajax request by myself but then I will lose the validation mechanism (that is working well with Angular-UI validate).
I thought about splitting the form into little forms and submiting only the forms where ng-dirty is not false, but this can cause a partial save if some requests will fail (and this is against the requirement).
Any idea?
You can check if the form or any named field is modified before submission. If the form has a name and your inputs have names like:
<form name="myForm">
<input name="input1">
</form>
In the controller you will have access to the object $scope.myForm and $scope.myForm.input1, and these objects will have a $dirty property which is true if the original value was modified by the user.
In the Angular documentation there is an example that covers ng-copy to implement a reset function.
http://docs.angularjs.org/cookbook/advancedform
During submit you could compare your starting model(master copy) to the changed/submitted object (changed copy) and only submit the changed items (or just delete those that are the same/unchanged).
Diff the copy and master with
http://blog.vjeux.com/2011/javascript/object-difference.html
This needs extra work to handle arrays.
Or convert to JSON and diff the JSON
https://github.com/benjamine/JsonDiffPatch