Validating PDF form fields before printing - javascript

I have a fillable PDF form that I would like to validate before the user prints it out.
Here is my form:
http://www.pentco.com/orderforms/pentco_creditapp_v2011b.pdf
I've looked online for a simple solution and I think I've found it. It is here:
http://www.alqemy.com/Forms/RequiredFields.pdf
I've looked at its field and button properties, but for the life of me I cannot figure out how it works. There is one line of code attached to the button behaviour and that's it.
Can someone tell me what I'm missing to put the same validation function in this form into mine?
Pete

The validateFields() method (used on button's mouse up event) is defined at document level. With Acrobat select 'Edit All JavaScripts' menu item and you will see the code for this method. It can be reused very easy, you just have to set tooltips for all required fields and these tooltips must end with '*' (this is how the method determines if a field is required).

This worked perfect...thanks for pointing out where to find that JavaScript. If others are confused:
You need to be in form edit
Then you go to Advanced-->Document Processing-->Edit All Javascript...
You will find the Validation code there. You want to copy it and add it to your print button's Javascript

Related

Autoclick a form input?

I am trying to create an adhoc code that save me pressing a repetitive button on a webpage, I opened F12 developer and tried using getElementbyID(..).click(); however didn't quite work, this is part extract of the button, I wonder if someone can advise what code I can use to automatically submit the button? Any help will be greatly appreicated. Best regards, Jon
what code I can use to automatically submit the button
If this is for a regular form post without AJAX then you can select the form then use submit().
E.g.
/*
* The variable myform is previously determined such as by `document.forms[0]`
* or a similar DOM selector method
*/
myform.submit();
If this is for a non-form button then use the click() method as suggested in the comments above. However, be aware that for this method there would have to be an Event Listener attached for the button to do anything of value.

HTML/CSS FORM: Data submitted though required field not valid or entered

This is my first time using HTML/CSS to create a form:
While trying to switch from google form to html form for the sake of having an upload button, I've found this very useful answer: Upload file/stackover
Then I looked at improving the design, so I'v found this:
CSS HTML Form Designs Template; (I've used Form Style 10).
So after trying and trying I've managed to do this:
JSFIDDLE
the Thanks.html file is missing (as on the original example post)
I'm almost done except few thing to sort out, if anyone can help me out that will be great:
I'd like all the required values to be checked upon submission
I've tried to add required Name: <input type="text" name="name" required /> nevertheless it sends the form data to the spreadsheet then display error message in the 1st required field (basically I'd like nothing to be sent until everything is ok in the form) (I read few things about onclick/onsubmit and type="button or submit"
but couldn't sort it out)
in the Thanks file, I've removed everything and wrote only:
<div>
<p><blink>Thank you <?= name ?>, your application has been received.</blink></p>
</div>
How can I center this message under the form, increase size and change colour to red please
I've tried to add the inner-wrap (grey colour around fields) as the template (Form Style 10) by adding: <inner-wrap> instead, but it doesn't work (any idea?)
Thanks you for your help
The reason why it doesn't do what you want is because the button still submits and you have no preventDefault event on submit because they assume you handle it on the backend. But will still display error messages to let the user know something is wrong.
There are several ways you can attack this problem:
you could use a 3rd party plugin like jquery validate
you can handle it to not submit until you check all the fields and then call
form.submit() (via this method you have the final one on the bottom not be input with type='submit' and handle click event and call a validate form method then submit if everything is alright)
on the backend you can check the fields to make sure they're all filled out and not even save to whereever
as for your text-centering: https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
Edit:
For form validation, import the jQuery Validate at the top of your page either with the CDN/local js file and then call:
$("#commentForm").validate();

Selecting the correct element to trigger form submit from within a function

I have several forms on a page. The forms are actually PayPal "add to cart" buttons. When a user clicks on a button, an alert box asks for their zip code. If the zip code in in the array of okZips, I want to programmatically follow the link through the submit button to the cart, but I just can't quite get the correct element to attach .submit() to.
$(this).add("div.check-zip").add("form:first").submit();//this submits the first form on the page
$(this).add("div.check-zip").add("form").submit();//this submits the last form on the page
$(event.target).add("form").submit();//this doesn't submit anything
$(myEvent).add("form").submit();//this submits the last form where myEvent is a global variable
The pen can be found here:
http://codepen.io/enielsen0001/pen/KwEbzz
How do I select the correct element to apply the .submit()? Am I going about this all the wrong way?
You are not going all the wrong way but it is definitely the baddest and dirtiest way. It seems like you don't know what you are doing. Your classes are messed up, you are mixing jQuery and plain js, you are using while and for. It seems like you have deliberately copy pasted code with no idea what it is. Please have atleast beginner's js/jQuery knowledge before posting questions.
However, here is the updated pen http://codepen.io/anon/pen/NPJJwJ.
You would need the actual form object for submit to work.
// myEvent is event itself not element
$(myEvent.target).parent("form").submit();
I have refactored stuffs involving while and for loops you used. Compare your code with updated code. Hope it helps:

Text fields don't get updated using the browser back button

I have been looking for information about this but I don't get with the solution.
I have some text fields on a page which I get updated on blur making use of jQuery events.
There's no form to submit, the update took place in the background using jQuery $.post.
If a user updates those inputs, then clicks on a link to go to another section of the page and then comes back using the browser's back button, those inputs won't show the last values set by the user but the previous ones in case there were, or empty text inputs if there weren't.
Users are reporting this as a bug (even is more a browser behavior), and I wonder if there is any solution for this.
I have been taking a look at things like this or this, but they don't solve the problem I have. I have no forms, I have no submit and I don't want to reset the form.
I've noticed this problem doesn't take place in IE 9 and either in Firefox but it does on Chrome.
The user can navigate to different pages (more than 30) with more than 12 text fields in each and therefor I have discarded the idea of storing them on sessions.
Is there any way to solve it?
Thanks.
I do not know if my solution can solve you're problem , but:
what if you bind data to you're input? e.g you can set dinamically data on input
$('input').data( 'val' , $(this).val());
and then re-bind it through
$('input').val( $(this).data() ) ;
Do not follow exactly these lines of code , I'm trying to give you an idea of what I'm wondering. I hope that it can help you.
http://api.jquery.com/data/ doc for .data()

setSubmitMode method behaving differently between users

I have two custom picklists: types and duration. The types pick list has two options and the duration has three. Based on what he picks in the types picklist, one of two variables will pass to the OOTB description text box. And based on what he picks in both of the picklists, one of six variables will pass to a custom warranty text box. Both of the text boxes are editable so he can tweak the paragraph-long variables as needed.
Problem 1: The setSubmitMode method was not present at first. When it was not present, he could not revise a quote.
Solution 1: I set the setSubmitMode to 'always' on the OnChange events.
Problem 2: When he tried to revise the quote it would throw a Read-Only error but still would allow him to revise and save the quote.
Solution 2: I set the setSubmitMode to 'dirty' on the OnChange events and added an OnSave event with a setSubmitMode to 'always'.
Problem 3: When he tries to revise the quote he gets a "Do you want to save your changes" dialog box. When he click "yes" it wipes out his changes and when he click "no" the Quote allows him to revise it... I can not produce the dialog box that a user is getting.
We've tried this in CRM for Outlook and in the browser.
If it helps to know, in both of our set-ups, it looks like it opens a new Quote window. In mine, however, the new window immediately closes without the dialog box in Outlook. But in the browser, it closes the original form too. (This isn't ideal but still is better than what he's getting.)
Thanks & Regards,
M
I'm not sure to exactly understand your issue but for those kinds of problem, I always used the same solution. On the OnSave event, i've this code to save read-only fields edited by the javascript :
if (Xrm.Page.getAttribute("my_field").getIsDirty()) {
Xrm.Page.getAttribute("my_field").setSubmitMode("always");
}
No setSubmitMode("dirty"), or anything else. Even on the onChange event.
I hope it helps, otherwise don't hesitate to add more infos about your process.
Kévin

Categories