I am having problem with angular validation.
this one does'nt work...
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="text1.$error.required">Please enter something!</span>
but this works:
<form name="myform">
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="myform.text1.$error.required">Please enter something!</span>
</form>
is it possible to somehow correct the first one without placing it inside a form?
thanks
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
As far as I know, no, it is not possible. The FormController is what handles the states of each form element, so you need a reference to it in order to check the validation state.
Related
I'm using this HTML code in an HTML page:
<form method="post">
<div class="form-group">
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password">
</div>
<input type="hidden" name="ref" value="post-ad.php"/>
<button type="submit" name="submit" id="submit" class="btn">S'identifier</button>
</form>
On clicking submit button which action will this form execute? I noticed that it execute the value of input named "ref" in this example "post-ad.php" or "index.php" or "dashboard.php". Is it normal?! As I know the action attribute is mandatory?
without action attribute it will POST/GET to the same page
see here
If I understood right you're asking about action attribute that goes inside <form>.
If you put nothing there, it'll send the POST to the same page it is right now. If that form is in "index.php" it'll send all <form> data to "index.php"
You call form without action with this code:
<form action="javascript:void(0);"></form>
I want to use HTML5 validation in Angular 4 rather than their form's based validation/reactive validation. I want to keep the validation running in the browser.
It used to work in Angular 2, but since I've upgraded, I can't get even manually created forms without any angular directives to validate using HTML5.
For instance, this won't validate in the browser at all:
<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
<input type="submit" value="Submit">
</form>
Angular4 automatically adds a novalidate attribute to forms.
To override this, you can add the ngNativeValidate directive to the form.
<form ngNativeValidate>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>
<input type="submit" value="Submit">
</form>
Unfortunately I do not see this reflected in the docs yet, but found it by looking at the source code:
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts
It appears also adding ngNoForm to the form has the same effect as ngNativeValidate depending on your use-cases for needing to declare something as not a form for whatever reason.
Hope this helps.
use ngNoForm or ngNativeValidate in your form
<form ngNoForm/ngNativeValidate>
...
</form>
I have one page with two separate forms. Most input fields are required. When I click the submit button on the second form, it asks me to fill out the required fields in the first form.
How do I make sure that it only validates the form in which I clicked the submit button?
<form method="post" action="index.php" name="orderQuick" id="orderQuick">
<input type="text" name="street" id="street" required>
<button type="submit" name="submitBtn" id="submitBtn">Submit</button>
</form>
<form method="post" action="index.php" name="order" id="order">
<input type="text" name="street2" id="street2" required>
<button type="submit" name="submitBtn2" id="submitBtn2">Submit</button>
</form>
I think it is because you have not closed <button> tag so it is considering both input type in one form. Close <button> tag.I think it will solve your issue.
I think you will need to use the jqueryvalidation plugin: (http://jqueryvalidation.org/valid/)
Using this plugin, on the click of the respective submit buttons, you just need to call the method:
$("#orderQuick").valid();
and
$("#order").valid();
This should solve your issue.
I have a form with the following code:
<form name="form" method="post" action="https://pilot.datatrans.biz/upp/jsp/getCcAliasFormMod.jsp" id="form_payment_cc" name="uppform">
<label for"cvv">CVV</label><br />
<input type="text" size="4" id="cvv" name="cvv" value="" required="required" />
<p></p>
<div class="order">
<div></div> <div><img src="/images/pfeil_orange.png" style="margin-left: 30px;"><strong>Weiter</strong></div>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="LaBK9OAZyhjENzWmCiCokS0kGXgFmbPNm7v1lo1LuRs" />
</form>
The form contains elements with the required="required" attribute. Unfortunately, for design reasons, I cannot use <input type="submit" /> to submit a form. Instead, I use <a onclick="form.submit()"></a>. HTML validation does not work when I try to submit this way.
Any ideas as to why? Are there ways to trigger HTML validation without using a submit button (I know that everything works when I use a regular submit button)?
You can try <a onclick="if(form.checkValidity()) form.submit()"></a>
Though it might be better to use CSS to apply your custom design and use native buttons.
Update:
It seems a regular button is required to trigger native validation. So a possible solution would be to use a hidden button and trigger a click using JS:
<form>
<input name="email" type="email" title="Enter your email" required />
<input id="sumbitBtn" type="submit" style="position: absolute; left: -9999px" />
Submit
</form>
For a CSS based solution (no JS required) using a regular button check this fiddle
If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:
<form id="myform" action="" method="POST">
submit
</form>
and then:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
document.getElementById('myform').submit();
return false;
};
};
If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that would work without manipulating the page using jquery or javascript. Can anyone explain this behaviour or how to fix it?
site: http://danmacmill.host22.com/
Remove the autofocus part of that input, and that problem is gone.
It's because you have autofocus on <input name="name"/>. Try removing it.
I think this will cause you the problem
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
but if you use it this way it will solve your problem
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Check this out
Remove autofocus property:
<span>Name*:</span>
<input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
It is because of the autofocus parametter you have on that input. You must remove it or manipulate with js