Javascript form validation not working through LightCMS - javascript

So I'm pasting in some code for a form from Salesforce.
This code to be specific: (from the style element to the end of the form) https://gist.github.com/13ab0efd07c2c8cdb3e1
When clicking submit while not filling out any or all fields, I get a form validation check and then a message will popup with the fields that I have not filled out.
However, when I paste the code into our LightCMS template the form validation is not working and just redirects to the thankyou page as if everything went through fine.
They use LightCMS. And even when link to an external js file instead of embedding the js I still get the same results.
I've noticed it adds an "onclick" element on the Submit button on the front-end but it only does that when it's in the CMS not on a bare bones HTML page.
Any thoughts?

i think you should add this
onsubmit=return formvalidator(Document.getElementByid(search-form))
before form action because it will check the form before submitting it. if check fails the action will not occur.

Related

Update Button Randomly Stops Working on WooCommerce Orders Page

The "Update" button in WooCommerce Order page randomly stops working and throws the following error in console everytime I click on the button:
An invalid form control with name='' is not focusable.
I read online that it has to do with some hidden but required input fields and HTML5 validation rules. But I went through all the input tags in the source code of the page when the button was not working and didn't find any such "hidden but required" input field.
I am looking for a quickfix right now, so is there anyway I can disable the browser from validating the form inputs, and allow the submit (Update) button to work always?
Any help would be highly appreciated.
Yes, I have also come around this bug while exploring the orders page on woocommerce. So, the workaround would be to loop all the form tags and add novalidate to them.
Fixed it using this script:
var badForms=document.querySelectorAll("form");
for(var i=0;i<badForms.length;i++){
badForms[i].setAttribute("novalidate","novalidate");
}

Can't submit upload form in Selenium, Page just refreshes

I am trying to upload an image to instagram's mobile website through selenium. It seems to find the element in question but when I try to submit it, the page merely refreshes.
uploadForm=driver.find_element_by_xpath('//*[#id="react-root"]/section/nav/div/div/form/input')
driver.execute_script("arguments[0].style.height='auto'; arguments[0].style.visibility='visible';", uploadForm)
#makes form visible
submitForm = driver.find_element_by_xpath('//*[#id="react-root"]/section/nav/div/div/form')
#selects whole form
driver.execute_script("arguments[0].style.height='auto'; arguments[0].style.visibility='visible';", submitForm)
#unhides form as well
uploadForm.send_keys("/testman.JPG")
#sends the file path to the input section of form
submitForm.submit()
#attempts to submit form, causing the refresh
Could there be some kind of JS listener preventing me from uploading this way? Here is the code of the form in question
Try doing a .click() on the submit button. Frequently, a dev will put a JavaScript onclick on the button that prevents the default action. You can see the default action for the form when the page "refreshes". The URL will contain your form as query-string parameter.

Submit multiple FORMS as 1 combined form?

I am using a jQuery plug-in to implement an accordion wizard based on bootstrap. http://sathomas.me/acc-wizard/#prerequisites
One thing that is odd to me is that each Panel is wrapped in a <form> </form> and the JavaScript then looks for each <form> and adds a Next or Back button.
So when you get the the final/last Panel and try to Submit the Form...it only will post the data from the last form.
I am not sure how I can make it take the form fields from each panel and then submit them all on the last form...This seems like a flaw in the design?
So my question is, is this even possible to have multiple forms and then have the last form submit all the data from all the forms combined?
With jQuery you can create a new in memory form var form = $('<form action="..."></form>') and then copy and append HTML from all forms on the page to this form form.append($('form').children().clone()). Then you can post in memory form form.submit().
This solution can only work if you're able to override behavior of submit button on the last form.
Check this fiddle Post all forms from page in one post jsFiddle

jQuery validation plugin not validating form in iframe

I am using this plugin:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
To validate a form that is hosted on a different server from my development site. All the validation scripts are on that document and appear to be working fine.
http://forms.icis.com/content/CHX0041_RequestFreeTrial
I am using an iframe to pull in the form from the external site but when i try and submit the form and fire the validation script it is not working. It just submits the form as if there was no validation at all.
The iframe sits within a CMS page that is contained in another form so i thought the issue may be there. This fiddle demonstrates the issue:
http://jsfiddle.net/We78c/
EDIT
It seems as though removing the URL paramaters from the iframe src fixes the issue:
http://jsfiddle.net/We78c/2/
However i need them so as to pass them through to some hidden input variables in the child iframe. Is this a known issue?
In your form you're setting the method="#" and action="post". The method should be method="post" and action should be the url where you're posting.
There was a JS error causing this to fail the validation. Commented out and seems to be working now.

Validation error with JotForm template

A client sent me a form template they had created using https://jotform.com to implement on their WordPress site. The form template is supposed to hide part of the form until the user clicks the next button. At which point a script is supposed to validate all of the input fields the user has presumably filled out and then display the rest of the form. While I have successfully managed to get the form to display the next part of the form when the user clicks next, it fails to validate the input fields.
It's kind of difficult to explain without a huge block of text so it is probably easier to show you:
The original working template that the customer sent me:
http://www.loftist.com/jotform/List_Your_Loft.html
The problem child:
http://www.loftist.com/?page_id=78
If you just click on one of the input fields and then click elsewhere on the page, the input fields successfully return a validation error message and prevent the user from clicking on the next button. However, if you simply click on the next button than the next set of fields get displayed.
Any thoughts? What am I doing wrong here? Im convinced this must be a really simple problem but Im not sure what it could be.
I don't understand the problem. Your first link, the original template, works for me with all the validations in place. The problem child on the second link is not a jotform form, and it doesn't have any paging stuff.
Do you mean jotform on your first web page is not working correctly? What does this have to do with the second form on your second link?

Categories

Resources