I am having some trouble with disabling Submit button in a HTML form in AngularJS.
Scenario:
I am selecting a certain process from a HTML Select Box ie. Drop
Down List
Once I select some entry from that, the lower portion is
automatically populated with the required form which again has a set
of inputs
Once you fill in these value, you can either Submit or Cancel the request
Condition:
There is a process in the list where I need to upload 1 or more files along with other input parameters. To do this, I am using a two step approach where I first Choose a File using a button and then I use another button to Upload the file. Clicking on this button makes a REST call and the file is sent to the required target.
I am using ng-file-upload directive from https://github.com/danialfarid/ng-file-upload to accomplish this.
Problem:
I was initially using ng-disabledto disable submit button on the condition that All mandatory input elements are filled and all input validations are passed. Now the problem occurs when I am in the use cases which need files to be uploaded. When I choose a file and upload it, HTML treats that element as empty as the file is already sent to its target and hence fails the validation All mandatory input elements are filled! If I remove this validation, my form expectedly get submitted even if Mandatory fields are empty.
So what can I do in this case to disable my submit button?
Create a boolean variable as what #ShashankVivek said.
if file uploaded $scope.uploaded = true.
so your button should look like this
<button data-ng-disabled="!form.valid && !uploaded">Submit</button>
Related
I am working on a multi part form that is composed of three views.
The user will have to fill the first part, click next, fill the second part, next again, the third part and finally submit the form.
However I would like to add validation to each part to ensure the user have filled all required fields before reaching the next part.
For simplicity and consistency with the rest of the website I would like to use the browser validation system, which is triggered at form submission by default.
Is there any way to use callback that detect invalid fields and highlight them when the form is submitted without a call to submit ?
I have a custom web control which has two html select field and buttons i use them to make associated and available list box.But in few situations i have to Validate that Associated field must have at least 1 entity. I implemented a client side custom validator to confirm that. and its working great but issue is i am unable to fire Validate at the time List box is made empty it fires when i click save button and similarly when i have moved a few entries in associated List. validation Message is stile there and removes only when i click save button.
So i want to know how can i fire validator when i need using javascript...
To fire a validator from javascript we may use ValidatorValidate(document.getElementById('validator clientID'))
for more details see http://fczaja.blogspot.in/2009/07/aspnet-how-to-trigger-client-side.html
I am using Adobe Livecycle ES2. My code is fine but all my validations are being displayed as a list in one single message box and that's not what I want. I want them to display after the user leave each field that's being validated. I tried solution like File>Form Properties> Form Validation but I don't have the Form validation option. I am wondering if I can get it to work by javascript coding.
You can add field-specific JavaScript code to the exit event for each field. If the user enters a value that doesn't pass the validation, you can then script something (a messagebox, an alert popup or some text) to appear as the user tries to leave the field.
You may want to use softer coded validation (which warns the user that the field isn't correctly completed but still allows them to move elsewhere in the form) in the exit event and use harder/stricter validation at the end of the form, for example, before the form is submitted) so that the user can't submit the form without completing the necessary fields but they can still progress with later fields even if the earlier fields aren't complete.
I have a file input element like this:
<input name="fileupload[]" id="fileupload" type="file" multiple="" />
A user browses for their files and selects them, the files then appear in a list.
Now say a user wants to not add a particular file they hit a cancel button and it is deleted. That works but how do I remove the value from the fileupload input so that when they do upload the file that is meant to be deleted isn't added?
You could use javascript to place a hidden input with each separate file instead of holding them in an array initially, then attach an event handler onSubmit which could collect all the separate files and upload them.
When you need to delete a file from the 'queue' you could just use your javascript to remove the hidden input the same way you are removing it from the list.
If you'd like some code examples, please post some of your code to get us started - it is hard to post code for you if there is no indication of such things like which server side language you are using to handle the files and what javascript you are using to handle the client side code.
You cannot set the value(or clear the value) of a file-input, but you can replace the input with a new input, the effect would be the same.
My Create view has some text inputs and an input type="file" which uploads an image. I am using jquery.Upload (http://lagoscript.org/jquery/upload) in order to post the image immediatly and get a preview before the user clicks Save.
My problem: the form action is Create, so when I upload the image, I get validation errors from empty text inputs that are binded to required #model properties. How can this be avoided? From what I understand this is client-side, javascript validation, I just need to tell it to ignore posts originated by input type=file.
SOLVED: Found it in this thread jQuery Validation plugin: disable validation for specified submit buttons
Just adding the class Cancel to the input disables validation from this input:
<input type="file" name="picture-upload" id="picture-upload" class="cancel" />
Create another ViewModel to handle this scenario that doesn't contain these fields or simply put the file upload in another form.