I have an angular 2 application which contains a basic form with inputs and basic html validation. Something like:
<form (onSubmit)="submit()">
<input type="email" />
<input type="submit" value="save" />
</form>
This worked about a week or two ago. Today, I was testing my application and noticed that it's completely ignoring any basic validation like type, pattern, max, min, etc.
In this case, it should complain when you type in a value without the # symbol. However, it isn't complaining anymore. You can type whatever you want in the input field.
Any idea how this could happen?
I was having this issue too. So I searched and found this.
Basically by default angular is adding something called novalidate.
If you guys want to use browser's native form validation just add ngNativeValidate attribute:
<form ngNativeValidate></form>
Related
I need to debug missing data in some from POSTed to the server and after reading lots of tutorials and following other examples about that aspect, I still can't find my problem. The use case is pretty simple in theory: Have one form with two submit buttons to trigger different implementation on the server side.
According to lots of tutorials and examples, the submit-buttons should send their name if they have a name-attribute, while values should not be sent at all. The naming thing seems to differ according server side programming languages, sometimes it's some_name and sometimes some_name[], but that doesn't make any difference for me currently.
My problem is that whatever HTML I create, inputs of type submit are never part of the POSTed data. OTOH, pretty much the same HTML as button works as expected: If the button is used to submit the form, its name and even value are part of the POSTed data. When other inputs are clicked to submit, no names of any submit-input are available in the data.
So, with the exact same form, reaching the exact same endpoint, using same browser etc., the following DOES NOT provide any hint to the clicked button in the POSTed data:
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
While the following OTOH does:
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
So, should the input work the same way like the button does in theory? Or is the HTML wrong and I'm not able to spot the error? Sending the form itself works in both cases, though. So the browser obviously knows about the submit-input and its purpose.
Or have something changed the last years in modern browsers and submit-inputs are not part of POSTed data at all anymore for some reason? I can't remember the need to have multiple submits on a form for years.
How does a minimal example using a submit-input sending its name look like and tested to work for you? And in which browser? I tested an up-to-date Chromium based Opera and IE 11 and neither did include submit names.
Thanks!
OPINION: I would personally NEVER use more than one word in the name of a submit button
FACT: If that word is "submit" or you have id="submit" then you will not be able to programmatically submit the form using .submit()
FACT if you have script that disables the form element, it will not be sent to the server
Conclusion
In my experience and according to documentation - If you have the following
<form>
...................
<button type="submit"
name="whatever you want here but I would only use one name and NOT submit">Whatever</button>
</form>
OR
<form>
...................
<input type="submit"
name="whatever you want here but I would only use one name and NOT submit" value"Whatever">
</form>
your server will receive the button as name=value in the POST array if method = post and in the GET if nothing or method=get AND in the REQUEST array in either case (assuming PHP)
TEST PAGE
<form method="post" action="testsubmit.php">
Did not work according to OP<br/>
But it actually DOES work if not disabled from elsewhere <br/>
<input type="submit"
name="foobar input"
value="foobar input"
title="foobar input"
/>
<hr/>
<input type="text" name="sentField" value="This WILL be sent to the server" style="width:300px"/>
<hr/>
<input type="text" name="disField" disabled value="This will NOT be sent to the server" style="width:300px"/>
<hr/>
Does work
<button type="submit"
name="foobar button"
value="foobar button"
title="foobar button">
foobar button
</button>
</form>
So, I have an input field that sends up a flag if the entered text is not exactly seven digits long. I used oninvalid to give it a customized error message if you try to save the data with a shorter string. The problem is that, once triggered, it will retain the red border and the error message, even after a valid string has been entered and the save button pressed again. Fields without customized error messages work fine. Any ideas what might be causing this, or a way to force it to clear the invalid flag?
Worth noting, I am not actually using a submit call, but making an angularJS call instead.
<form name="myForm" class="myForm" required>
<input name="barcode_num" size="7" type="text" class="form-control" maxlength="7" ng-required="ctrl.barcodeRequired" ng-model="ctrl.barcode" pattern=".{0}|.{7}" oninvalid="this.setCustomValidity('Barcode must be exactly 7 characters')" />
....
<button ng-click="ctrl.submitButton()" type="submit">SAVE</button>
</form>
I would recommend checking out docs.angularjs.org/api/ng/type/form.FormController and docs.angularjs.org/guide/forms. These details how to use the built in angular form controller to hide and show errors and classes.
Essentially you can use a span for the error, and using the built in $error properties, you can display the message like so:
<span ng-show="myForm.barcode_num.$invalid">Barcode must be exactly 7 characters</span>
And in your input, you can use ng-class to have angular update your classes. You can add the class for the red border like so:
<input ... ng-class="{ 'red-border-class': myForm.barcode_num.$invalid }" />
If you read through those docs, you will see there are numerous different validation properties. You can validate the entire form or each named input. You can also have multiple spans for showing different error messages.
Sometimes I see a form that is wrapped in a form tag
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
And sometimes there is no form tag, but just a div
<div class="view">
<input class="toggle" type="checkbox">
<button class="destroy"></button>
</div>
<input class="edit" value="<%= title %>">
How come sometimes the form tag is present and other times its not for forms?
Prior to submitting information via AJAX, HTML forms were the standard in sending information to a server from a web page. They include the destination and method in the form attributes. More recently, this can be handled without assigning these attributes in form and sent via Javascript; typically using AJAX. This means the form element isn't necessary but is a good idea to include where possible to be syntactically correct HTML.
The <form> tag is not used specially when developers decide not to submit data in a conventional manner. The <form> tag has the main purpose of wrapping all the inputs that will be submitted to the next page specified on the action attribute of the <form> tag, and these data is sent using either POST or GET method indicated with the method attribute.
<form action="nextpage.php" method="post">
When the inputs are not wrapped by a <form>tag it means that the data is never submitted to another page or it submitted in a different way through javascript.
JavaScript is able to read the values of all the inputs and submit this data to a next page simulating a form or simply send it to the server without changing the page, when the page never changes but the data is sent to the server is when we say it was submitted using AJAX.
Forms input types are not always used to send values, they could be use as controllers, like date difference purposes, ranges or sliders to control alpha chanel, or rotate and image, making calculators, showing or hiding stuff on the page, lots of purposes other than just submitting to other pages
Check this code for a calculator on one of posts couple hours ago, lots of buttons, but not submitting anything
<INPUT TYPE="button" ID="button-cos" VALUE="cos">
Another example using button and input type="text" online image editor tutorial
I have an input in my form with a step defined to 3:
<form>
<input name="surface" id="surface" type="number" step="3" />
</form>
I would like to be able to enter a number not multiple of the step, but it's refused at validation by the browser.
In example, if I insert "2.5" in the input, the message error I've got is:
Please select a valid value. The 2 closest values are 0 and 3.
Is it possible to make this step not mandatory?
I've tried to add novalidate="novalidate" as attribute but it doesn't work.
After more research, it appears it's not possible to make the step non mandatory on an HTML5 input.
I'll have to implement a custom number input (in jQuery or else) to achieve this.
I have a form:
<form method="GET">
<input type="text" value="hello" name="myname" />
</form>
If this form is submitted, I will end up at:
example.com/?myname=hello
What I would prefer is that when this gets submitted, I end up at:
example.com/hello
Is this possible?
No, you cannot change the way form submission works in HTML. (Using JavaScript, you can do transactions in a different way, without using HTML form submission.) When using method="GET", the URL gets constructed in a specific way; when using method="POST", the URL does not contain submitted data at all (it is sent outside the URL).
There is a trick that changes form submission in one way, but not quite the way you want. If the name of a control is isindex, then the control name and the equals sign are omitted; but the question mark is still there. That is, <input type="text" value="hello" name="isindex" /> would result in http://www.example.com/?hello. And Chrome has broken this when they removed the remainders of support to the isindex element.
If, for some special reason, you really need to make a form create requests like http://example.com/hello, then the simplest way is to set up a very simple server-side script that accepts normal requests that result from HTML forms and just passes them forward after modifying the URL in a simple way.