w3c validation issues - asp.net

im confused, the w3c validation service seems to be saying that asp.net cannot legally render a hidden field inside a form tag on the page, have a look at this ...
http://validator.w3.org/check?uri=http%3a%2f%2fmotcombegarage%2eco%2euk%2f
from what i can tell it seems to be saying that the following code sample is invalid markup WTF !!!
<html>
<head> ... header stuff ... </head>
<body>
<form method="post" action="" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKt17cxAr+s9MgFAqjXzJsHz7KyzLpZjYtTK89blY7GgKAElK/5syvVNn4h7rVehcQ=" />
</div>
... other code ...
</form>
</body>
</html>
This presents 2 problems for me if the code is in fact invalid:
This code is generated by the .net framework for handling postbacks so editing it could be a problem
i have no idea what the valid context for a form field should be (lolz)
Is this a bug or have i done something wrong ???
EDIT:
As pointed out by Peter O below I added the missing div tag in my markup ... comparing this to the markup that the validator uses shows that this div whilst present in the markup is apparently not worth validating ... so that kinda changes the question to ... why is it ignoring that div ? ...
Seems a bit odd that you can't put an input tag inside a form tag directly though ... surely thats the point of a form tag, to contain input tags ??

The only way I've seemed to get rid of the message, following the code on your homepage, is to assign a value to the first hidden input
<div class="aspNetHidden">
<input type="hidden" name="ctl09_HiddenField" id="ctl09_HiddenField" value="toverton" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NzEyODQ1M2RkJPtW5VtaL7LPuSxnn1JM1yVnOeGAovb8b4b3KShHy4M=" />
</div>
In all liklihood, this is most likely a bug.

The INPUT elements should be placed within a DIV element, like this:
<form ... >
<div>
<input type="hidden" ... />
<input type="hidden" ... />
<input type="hidden" ... />
</div>
</form>

Related

Submitting html form with hidded fields using code behind

heloo,
i have a html form which is posting data to a link like
<body onload="javascript:document.E_FORM.submit();">
<form action= method="POST" name="E_FORM">
<input type="hidden" name="a" value="1" size="100"><br />
<input type="hidden" name="b" value="2"><br />
<input type="hidden" name="c" value="3"><br />
</form>
i want to submit this form using code behind using string builder to create form and then submit using WebClient.

Form Variable Becomes Part of Link to Web Page

We are hosting a PURL site and the variable is at the end: http://mywebpage.com/first.last
Now the client wants a static web page where you go and enter a first and last, then on submit it goes to out PURL site.
Tried this with straight html but it's not going to work. On to ASP.
New to ASP and I'm trying to have a form that has 2 fields, first, last in a link. Here is the form concept:
<form id="form1" name="form1" method="post">
<p>
<label for="1">First Name:</label>
<input type="text" name="first" id="first" />
<label for="2">Last Name:</label>
<input type="text" name="last" id="last" />
</p>
<p><input type="submit" name="3" id="3" onclick="window.open('http://mywebpage.com/first=val1&.&last=val2')"/>
</p>
</form>
Any help to put me on the right tracks would be extremely welcome at this point.
Thank you,
Ed
Try this:
<form id="form1" name="form1" method="GET" action="http://mywebpage.com/" >
Then do a normal submit without onclick and window.open.
action will submit form to that URL, and method="GET" will pass form parameters in a query string.

Chrome Email Input Field built-in validation warning visually offset

I'm building a super-simple sign-up form for a mini app and thought it'd be fun to use the browser's built-in HTML5 validations if I could - so I made the text input for the form a type="email" for funsies. Load it up in Chrome (27.0.1453.116) and attempted to enter an invalid email ("lksjdf" or something, you know), and as expected an error message pops up when I attempt to submit. But the unexpected part was the validation message is offset from the text box by about 60 pixels (give or take a few)(note that the email field is active, but the error message appears to point to the password field):
If I remove all styling and just leave the markup, the validation message position is improved, but about the amount of margin and padding that were on the form field:
When I repeat the process in Firefox, the validations show up correctly.
As we're narrowing down the issue, it appears that having an <h1> tag just before the form tag causes the problem to appear - if I remove the <h1> tag then the validation message lines up correctly.
Is this a bug in Chrome? Is there a way I can force Chrome's validation messages to line up with the input correctly? Why would another tag cause it to not line up?
Here's the code so you can test/verify:
<!DOCTYPE html>
<html>
<head>
<title>Sample App | Sign Up</title>
<!-- stripped out styles and js -->
</head>
<body>
<!-- stripped out other irrelevant markup -->
<h1>Sign Up</h1>
<form accept-charset="UTF-8" action="" id="new_user" method="post">
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" size="30" type="text" />
<label for="user_email">Email</label>
<!-- This is the validation test field! -->
<input id="user_email" name="user[email]" size="30" type="email" />
<label for="user_password">Password</label>
<input id="user_password" name="user[password]" size="30" type="password" />
<label for="user_password_confirmation">Confirm Password</label>
<input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
<input class="btn btn-large btn-primary" name="commit" type="submit" value="Create my account" />
</form>
</body>
</html>

asp.net add value to form method

Basically I want to place a url in the form action method.
The ltlUrl.text value is added on the server side in pageLoad.
How do i use the ltlUrl as the action method?
<form action="<%# ltlurl.text%>" enctype="multipart/form-data">
<input type="text" name="title" value="test" />
<input type="file" name="file" />
<input type="submit" />
</form>
Since you are populating the text control on code behind, you can simply do this:
this.Page.Form.Action = "http://someour";
I believe the VB.NET syntax would be:
Me.Page.Form.Action = "http://someurl"

Paypal Form Inside ASP.NET Form

Cheers,
I have a problem with integrating Paypal Shopping Cart to my ASP.NET C# project.
The problem is that Paypal Shopping Cart is inside a FORM tag, so if I place that inside my server form tag it won't work.
It would look like this:
<body>
<form id="form1" runat="server">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="MySecretEmail#hidden.com">
<input type="hidden" name="display" value="1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_viewcart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</form>
</body>
Is there any way I can prevent this from happening? I've search on google and here on Stackoverflow where I found this link: PayPal Name-Value Pair API Basics, but honestly, it doesn't make any sense to me since I'm not a programmer.
Thank you!
The simplest way to solve this problem is to use the PostBackUrl property of the asp:button. Using this method, the ASP generates your JavaScript to handle the external post.
This allows the rendering of the form to happen correctly and doesn't require any workaround. Remember that as your code is already in a form tag, your paypal items don't need to be wrapped in an extra tag.
e.g.
<input type='hidden' name='cmd' value='_cart'/>
<input type='hidden' name='upload' value='1'/>
<input type='hidden' name='business' value='business#business.com'/>
<input type='hidden' name='currency_code' value='aud'/>
<input type='hidden' name='item_number_1' value='item number_1'>
<input type='hidden' name='item_name_1' value='16x16 inch square canvas'>
<input type='hidden' name='amount_1' value='70'>
<input type='hidden' name='item_number_2' value='item number_2'>
<input type='hidden' name='item_name_2' value=' 48x20 rectangular canvas'>
<input type='hidden' name='amount_2' value='104'>
<asp:Button ID="Button1" PostBackUrl='https://www.paypal.com/cgi-bin/webscr' runat="server" />
Hope this helps.
Technically, your example isn't valid HTML. In the longer term, you might be best refactoring this code to remove your 'technical debt'. (See "must not contain other form elements" under element prohibitions on the W3C site for XHTML 1.0)
In the meantime, you could try submitting the nested form with jQuery.
1. Replace Submit Button
<button class="submit-button" id="submit-button">Submit Payment</button>
2. Amend Form Tag
<form id="nested-form" target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
3. Submit form using jQuery
<script type="text/javascript">
$('#submit-button').live('click',function() {
$('#nested-form').submit();
});
</script>
I haven't had a chance to test this, so please test and let me know if it works for you.
Here's a very easy method. It's what I use exclusively so I know with 100% certainty that it works.
Create a "false" image only PayPal button.
User clicks this button (it's just an image)
This image has an onclick method which calls a 2 line javascript function (see below)
Put your "real" PayPal button form at the end of your page AFTER the closing form tag.
Enclose it in a SPAN tag with style="display:none;"
Add ID="ppsubmit" to the "real" button's image input
When user click the false button, the onclick method calls a javascript function that does just 2 things ... a) changes span display to inline and b) automatically clicks the real PayPal button.
<form id="form1" runat="server">
<!-- Here's the image only "false" paypal button -->
<input type="image"
src="https://www.sandbox.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif"
border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"
onclick="javascript:doPPform();" />
</form> <!-- this closes your asp.net form -->
<!-- Here's the hidden span with the real paypal button
at the bottom of your webpage -->
<span id="ppform" style="display: none;">
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post"
target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="xxxxx">
<input id="ppsubmit" type="image"
src="https://www.sandbox.paypal.com/en_US/i/btn/btn_subscribeCC_LG.gif"
border="0" name="submit"
alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0"
src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif"
width="1" height="1">
</form>
</span>
<!-- Here's the 2 line javascript code when the user clicks the "false" button -->
<script language="javascript" type="text/javascript">
function doPPform() {
document.getElementById("ppform").style.display = "inline";
document.getElementById("ppsubmit").click();
}
</script>
A quick solution would be to put the paypal form inside an iframe.
On the form element, change target="_parent" so it posts back to the parent page.
Why don't you make the page the payment form is on use a MasterPage that has the tag removed. I do this on all the sites and it works without problems.
I discovered the PayPal button problem before I discovered that it is an ASP.NET problem.
In the process of creating buttons and adding to my page, sometimes they would work and sometimes they would not. Then I would have 2 identical buttons and the second would work and the first would not. Remove the first and then the button that worked would not. To get to the point if I added a form tag before my PayPal button the Paypal button works.
<%-- simple form tag --%>
<form action="">
</form>
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="hughet_1335403121_biz#yahoo.com">
<input type="hidden" name="lc" value="US">
<input id="iptItemName" type="hidden" name="item_name" value="testBuyNow">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="cn" value="Add special instructions to the seller">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn"
value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">
<input type="image"
src="https://www.sandbox.paypal.com/en_US/i/btn/btn_buynowCC_LG.gif"
border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0"
src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif"
width="1" height="1">
</form>
I understand this a "hack fix", and I'm not sure why this works. Curious if this works for others.

Resources