I'd like to make certain input-fields only available for integer or decimal-values. So I got the following code:
<input type="text" pattern="[0-9]*" [(ngModel)]="myValue" pInputText class="medium-field"
(change)="calculate()"/>
So this field is marked if the pattern does not match the input. Still I would like to disable the submit-button while the pattern is not matched. Can I somehow access that value as a boolean or is there another way?
If you don't want to use Reactive Forms, you can do:
<input type="text" pattern="[0-9]*" [(ngModel)]="myValue" #myInput />
<button [disabled]="!myInput.validity.valid">Submit</button>
That will disable your submit button if the HTML validity of your input is invalid.
Here is a working example.
I would also suggest you use type="number" in your input.
The form will be marked automatically as invalid if your input didn't matched with your pattern.
You can just use:
<form novalidate
#form="ngForm">
/* Your inputs */
<button type="button"
[disabled]="form.invalid"> // form as per the referenced #form="ngForm"
// Disables if your inputs are invalid or doesn't meet with its pattern
Submit
</button>
try form validation for it.using *ngIf and
<button type="submit" [disabled]="form.invalid">SEND</button>
Related
I have in a form an input field, its type is url.
I want the field will accepted when I write anything in it.
(I don't want to change the input type).
(Without using Javascript please).
Do you know how can I make it ? Thank you
It is not possible without changing the input type but you can use the pattern to perform custom validation like in the example below
<html>
<form action="/">
<input id="url" name="url" type="text" pattern="[A-Z]{3}" title="Custom Validation/">
<button type="submit" >Submit</buton>
</form>
</html>
I have this code, I use formaction attribute to return in home.html
but it's not working because of required attribute.
<form action="post">
Name:
<input type="text" name="name" required>
<br>
Email:
<input type="email" name="name" required>
<button name="Send" id="send">Send</button>
<button name="Return" id="return" formaction="home.html">Return</button>
</form>
The formaction attribute working fine. I can use the Network tab in my browser's developer tools to observe that when I click Return (in the live demo in your question) the form is submitted to home.html.
The required fields are still required (so I have to fill them in before that happens), but that is to be expected.
It sounds like your goal is to provide an exception and not need the user to enter any data when submitting the form to Return.
That isn't possible without adding a bunch of JS but you're approaching the problem from the wrong angle in the first place.
It looks like you want something for the user to click on that will abort filling in the form and just go to a different URL. There's no data submission involved.
That isn't a job for a submit button.
Use a link instead.
Return
You can apply CSS if you want it to look like a button, but I wouldn't recommend it. The visual appearance of the button implies that the form data will be sent somewhere, and that isn't what you are doing.
You should refer to homepage at the form tag
<form action="home.html" method="POST">
and for the submit
<input type="button" name="Return" id="return">
I have this form where user need to submit the num of days and it cannot be less than 1. So, I put a pattern there and with read only attribute.
My question is, why the pattern is not working when I put the readonly attribute? Let say, the numofdays is zero, supposedly when I submit, it will say the pattern is not match. But, when I put the readonly, the pattern is not working and the form is submitted even if the pattern is not correct. Is there any way that I can do this?
HTML
<form>
<input class="form-control" type="text" name="numofdays" id="id1" value="diffdays" pattern="[1-9]" title="No of days should not be less than 1" readonly>
<input type="submit" value="Submit" class="btn btn-primary">
</form>
That's by design.
Constraint validation: If the readonly attribute is specified on an
input element, the element is barred from constraint validation.
Source: https://www.w3.org/TR/html5/forms.html#the-readonly-attribute
So I have this form and I really want to use html5 validation. Problem is, there are two things my form needs to do:
Simply save the current state so it can be reloaded later (via jsp/servlets) (WITHOUT VALIDATING)
Actually submit the form (validate it before submitting)
Is there a way to turn off validation for a given button/submit but keep it for the other?
My workaround would be to use an AJAX call for the former and regular submit for the latter, but it kind of messes up the system I have in place.
You can add the "novalidate" attribute when the user clicks on a given button.
<form method="post" action="/foo" novalidate>...</form>
This disables html validation.
Add it again when you want your final submission.
EDIT
Apparently there's a better option, the formnovalidate attribute, that you can add to a specific field (which apparently is exactly what you want):
<form action="demo_form.asp">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate="formnovalidate" value="Submit without validation">
</form>
Yes, by toggling the novalidate attribute (or the noValidate property on the HTMLFormElement object) with JavaScript.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-novalidate
I've got really simple question - is there any way to disable HTML5 validation only for some chosen inputs (instead of setting "novalidate" for whole form)?
I mean something like <input type='number' requirednovalidate>. But this doesn't work.
You may ask why I need type="number" or "required" then? Well, I need it there because my framework uses it for its own validation.
EDIT
It is about one special input - birth number. I need it to be of type number (because of mobile devices) but its value is mostly used with "/" (e.g. 860518/8757) which is not valid character for type number. So I need user to fill it without slash (8605188757). The problem is when there is invalid value filled in html5 input (e.g. "fsda" in number type), it seems like it is empty, with no value.
So when user fill the value in wrong format (860518/8757), html validation is disabled so the JS validation runs, it is validated like empty field. So the error message is like "Please fill the field birth number" (which is really confusing) instead somthing like "Sorry, wrong format".
My solution was to enable html5 validation for this field (so the default browser message is displayed when there is wrong format filled) but disable it for other fields so that they would be validated only with my JS validation.
You cannot disable HTML5 validation for a chosen input(s).
If you want to remove validation on the entire form you can use formnovalidate in your input element.
For example,
<input type="submit" value="Save" class="button primary large" formnovalidate/>
Note you can use formnovalidate with <input type=submit>, <inut type=image> or <button> -source
For more info go here or here.
novalidate attribute is only for form tag, it can't be applied on form controls.
You can remove the required attribute in js, after your framework validates:
$('[Selector]').removeAttr('required');
Now the selected field will not be validated.
Inputs will be validate when:
have attr required or prop required=true
aren't empty; don't have to have attr required or prop required=true
and have no attr disabled or prop disabled=true
If you want to validate data in a specific way, use pattern attr.
JSFiddle
(function() {
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
});
})();
<form>
1. <input type='text'><br>
2. <input type='text' required><br>
3. <input type='text' required disabled><br>
4. <input type='text' value="" pattern="\d*"><br>
5. <input type='text' value="" pattern="\d*" required><br>
6. <input type='text' value="" pattern="\d+"><br>
7. <input type='text' value="" pattern="\d+" required><br>
8. <input type='text' value="test" pattern="\d+" required disabled><br>
<button>check field validity</button>
</form>