I've got a standard HTML form, which is split into two sections using fieldset elements. One section is to enter name, email address etc and the second section is to enter the postcode for an address auto-complete feature (the postcode lookup field in the second section does not have a required attribute).
Each section has its own submit button. Each of the fields in the first section has a form field with a HTML5 required attribute.
My question is, when a user enters their postcode into the postcode lookup field without entering anything in the first section, all fields in the form are submitted in browsers which don't support this attribute (e.g. Firefox 3.6). In Firefox 4 (for instance), it honours the required attribute and prevents submission of the form if there are empty fields with a required attribute. However, this breaks my implementation of the error-checking and validation of the form (server-side, in PHP).
So, is there a way of being able to tell the browser to (in this case) ignore the "required" attributes of the first section when the submit button of the second section is pressed?
I understand this may be going against the point of the required attribute, but I've built the form so it doesn't have to be completed in a certain order, i.e. A user may choose to complete the postcode lookup field before entering their personal details, but the required attribute is currently forcing the user to complete the form in a certain way, when it isn't necessary to do that.
Also, any solution must be able to work without JavaScript. Please don't mention any answers advocating replacing the postcode lookup section with Ajax, it has been decided for me that this is not an allowed option.
I think I see your problem. I don’t believe there’s anything in HTML that lets you specify this more complicated validation rule. I think you’ll have to either:
Split these fieldsets out into two separate forms on the page;
Use two separate forms on two different pages; or
Re-write your server-side code so that the non-postcode form fields only include the required attribute when the user has submitted a postcode.
Is there any nested form in your page?. first form tag not work in nested forms like below. in that case use empty form tag to avoid error. and also do not write class with form tag starting like form.filed{}
<form>
main form
<form> </form>
<form> form1 </form>
<form> form2 </form>
</form>
Related
I have a problem with duplicated Marketo Form. I have 2 exactly the same forms on a page. First one is displayed in the content section of the page, the second one is diplaying in a popup when some button is clicked.
The issue is that when I submit the first form which is blank the validation messages are displaying for the second form in a popup.
I understand that the problem is that 2 forms have the same ID.
Is there a way to have 2 exactly the same Marketo forms working well on a page?
The problem is that when the Marketo form is embedded, it gives the <form> element a unique ID attribute based on the form ID. When you put the same form on the page twice, it puts two <form> elements on the page with the same unique ID, and - apart from that being invalid HTML - it means when you submit one form, it tries to submit both forms.
I'm not sure if it is possible - but there may be a way to use javascript to dynamically alter the <form> ID after it has been loaded into the page, therefore giving you two separate unique IDs... YMMV!
The only other workaround I've used was to duplicate the form in Marketo, and have a 'form A' and 'form B'.
I need to set different signup forms for the same MailChimp list. For example:
A signup form with just Name and E-mail.
A signup form with just Name, E-mail, City and Company.
A complete signup form with all fields available.
These different signup forms would be applied on different circumstances, but they would all register the subscriber on the same list.
Please let me know when this will be implemented.
Thanks a lot!
If you goto Form Builder in Mailchimp choose Embedded forms.
When in here choose the 'Naked' option.
This provides you the raw html that you can then amend. Eg. I removed the first name and last name and fields that came with it.
Be aware that if you have any required fields, you will not be able to submit form without them included. There is a link to the form editor which let's you choose which fields are required.
Here it says it's required
http://www.w3schools.com/tags/att_form_action.asp
but I see that forms get submitted even if I don't specify an action attribute, and the form gets submitted to the current page which is exactly what I want.
The requirement is only by standards. It is perfectly possible to do whatever you want on a page and not follow standards. Things may not display or work correctly if you do that, but likely they will. The goal is to follow them, and the idea is that if you follow them, your page will always work; you don't have to worry about anything.
Yes, the form is required to have an action attribute in HTML4. If it's not set, the browser will likely use the same method as providing an empty string to it. You really should set action="" which is perfectly valid HTML4, follows standards, and achieves the same exact result.
In HTML5, you can actually specify an action on the submit button itself. If there isn't one, it uses the form's action and if that is not set, it defaults to the empty string (note you cannot explicitly set the action to an empty string in HTML5).
It looks like the HTML4 spec requires it. I suspect some browsers do what you want to "make things easier". I don't recommend relying it on though. Since you're in undefined behavior, a browser could reasonably decide to just do nothing when the form is submitted with no action.
You can get the behavior you want while following the spec by leaving the action blank (since it's relative, blank means the current page):
<form action="" ...>
As mentioned by bazmegakapa, the HTML5 spec doesn't seem to require the action attribute:
The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces.[emphasis added]
Interestingly, this means in HTML5, <form action=""> is not valid, but it's not clear if a form without an action is required to work (submit to the current page).
Technically it's a violation of the HTML 4 spec, but all browsers will post back to the originator of the response if no action is specified. I would agree it's not a smart idea to rely on it but it does work.
EDIT: As it has been pointed out to me that this question is tagged as HTML 5:
In HTML 5 they list the action attribute as no longer required: http://www.w3schools.com/html5/att_form_action.asp which is in accordance with the HTML 5 specs.
// thread resurrection alert
To extend upon animuson's answer...
If after all button formaction and form action attributes have been assessed, if "action" still evaluates as "empty string", then from HTML5.2 spec section 4.10.21.3 point 8 states:
If action is the empty string, let action be the document’s URL of the
form document.
when it comes to submission of the form, which is what you wanted.
I have working user registration form.
It consist of Zend Form Elements.
Now I wonder what is the best way to modify this form in order to implement a "switch" in registration form. In other words user should be able to choose which fields to fill (there should be fields as for individual user and company; only few elements should change their labels and "required" state of a selected registration type) and accordingly of made choice validate appropriate fields.
So which is the best and not hard way to make it?
Maybe there are some tutorial or examples?
Thank you!
I think that the best place to change required" states and validators of your form elements is just before validating your form, i.e. $yourForm->isValid($_POST). In this place you would have to change the validators and/or required states of some fields. Which fields would depend on the value of registration type input form element.
As far as showing/hiding specific form elements goes, you could do it on the front-end side using JavaScript.
I am wondering if anyone can give a "best practices" response to using blank HTML form actions to post back to the current page.
There is a post asking what a blank HTML form action does here and some pages like this one suggest it is fine but I'd like to know what people think.
The best thing you can do is leave out the action attribute altogether. If you leave it out, the form will be submitted to the document's address, i.e. the same page.
It is also possible to leave it empty, and any browser implementing HTML's form submission algorithm will treat it as equivalent to the document's address, which it does mainly because that's how browsers currently work:
8. Let action be the submitter element's action.
9. If action is the empty string, let action be the document's address.
Note: This step is a willful violation of RFC 3986, which would require base URL processing here. This violation is motivated by a desire for compatibility with legacy content. [RFC3986]
This definitely works in all current browsers, but may not work as expected in some older browsers ("browsers do weird things with an empty action="" attribute"), which is why the spec strongly discourages authors from leaving it empty:
The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces.
Actually, the Form Submission subsection of the current HTML5 draft does not allow action="". It is against the spec.
The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces. (emphasis added)
The quoted section in mercator's answer is a requirement on implementations, not authors. Authors must follow the author requirements. To quote How to read this specification:
In particular, there are conformance requirements that apply to producers, for example authors and the documents they create, and there are conformance requirements that apply to consumers, for example Web browsers. They can be distinguished by what they are requiring: a requirement on a producer states what is allowed, while a requirement on a consumer states how software is to act.
The change from HTML4—which did allow an empty URL—was made because “browsers do weird things with an empty action="" attribute”. Considering the reason for the change, its probably best not to do that in HTML4 either.
Not including the action attribute opens the page up to iframe clickjacking attacks, which involve a few simple steps:
An attacker wraps your page in an iframe
The iframe URL includes a query param with the same name as a form field
When the form is submitted, the query value is inserted into the database
The user's identifying information (email, address, etc) has been compromised
References
Bypassing CSRF protections with ClickJacking and HTTP Parameter Pollution
This will validate with HTML5.
<form action="#">
IN HTML 5 action="" IS NOT SUPPORTED SO DON'T DO THIS. BAD PRACTICE.
If instead you completely negate action altogether it will submit to the same page by default, I believe this is the best practice:
<form>This will submit to the current page</form>
If you are sumbitting the form using php you may want to consider the following. read more about it here.
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Alternatively you could use # bear in mind though that this will act like an anchor and scroll to the top of the page.
<form action="#">
I think it's best to explicitly state where the form posts. If you want to be totally safe, enter the same URL the form is on in the action attribute if you want it to submit back to itself. Although mainstream browsers evaluate "" to the same page, you can't guarantee that non-mainstream browsers will.
And of course, the entire URL including GET data like Juddling points out.
Just use
?
<form action="?" method="post" enctype="multipart/form-data" name="myForm" id="myForm">
It doesn't violate HTML5 standards.
I used to do this a lot when I worked with Classic ASP. Usually I used it when server-side validation was needed of some sort for the input (before the days of AJAX). The main draw back I see is that it doesn't separate programming logic from the presentation, at the file level.
I use to do not specify action attribute at all. It is actually how my framework is designed all pages get submitted back exact to same address. But today I discovered problem. Sometimes I borrow action attribute value to make some background call (I guess some people name them AJAX). So I found that IE keeps action attribute value as empty if action attribute wasn't specified. It is a bit odd in my understanding, since if no action attribute specified, the JavaScript counterpart has to be at least undefined. Anyway, my point is before you choose best practice you need to understand more context, like will you use the attribute in JavaScript or not.
When you put empty action then some security filtration consider it malicious or phishing. Hence they can block your page. So its advisable not to keep action= blank.