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
Related
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>
Just trying to make a field that only accepts 8-digit numbers and every browser lets it pass with any number of digits.
<form>
<input type="number" pattern="[0-9]{8}" required>
<input type="submit">
</form>
I feel like I'm missing something really obvious here am not seeing the problem with my pattern.
Codepen: https://codepen.io/mavelo/pen/VVZvoP
<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Pattern_validation
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>
I have a valid reason for wanting to do this, but it's a long story so I'll forgot trying to explain why and just ask if it's OK to do.
I have a page where I need to have multiple forms with the same name, but I only want the form whose submit button is click to be submitted. For example, the following might be on my page:
<form name="input" action="" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
text
<form name="input" action="" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
text
<form name="input" action="" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Is this acceptable?
Regarding the HTML 4.01 specication, you can use form elements with the same name attribute, as there is no uniqueness requirement on them. Doing so defeats the purpose of such attributes, though. They are meant for making it easier to refer to forms in client-side scripting: if you have <form name=foo>, then document.foo refers to that form.
It is undefined what happens when same name attribute is used, but what browsers seem to do is to return an array. In your example, document.foo would be a 3-element array, with document.foo[0] being the first form. But this is not useful, since (assuming there are no other forms in the document) you could use document.forms[0], with a well-defined meaning.
The name attribute itself is outdated for form elements (but not for form fields, where it keeps being essential). The HTML 4.01 spec clause on form says:
“name = cdata [CI]
This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.”
In the HTML5 drafts, even the formal rules disallow the use of the same name attribute. The HTML5 clause on the name attribute on form says that its value “must be unique amongst the form elements in the forms collection that it is in, if any”. This is a confusing formulation, but it is safest to assume that it must be unique within the form elements of a document.
Yes it is allowed, only id's must be unique. I wouldn't recommend it however, why even put yourself in a position to be confused down the road.
The name attribute only defines what each form field element will be represented as when sent to the server.
It is also ok in HTML5. Only the name must be unique inside the form itself.
See the docs: "The value must not be the empty string, and the value must be unique amongst the form elements in the forms collection that it is in, if any."
When the user clicks a submit button, only that form will be taken in action. Still, it should be better to name them so that you are not confused :)
I know by reading the W3C documentation for HTML4.01 and HTML5 that the "name" attribute originally existed as a property of the <a> tag to permit people to link to an anchor point within a document.
However, now that all major browser vendors allow linking to any HTML element within a document via the "id" attribute, is there still any real use for the "name" attribute? If so, how should I be using the "name" attribute?
One thing that comes to mind are radio buttons: you have to use name to specify which ones are part of the same group.
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
The name attribute is required, I think, on input elements (and their friends)...
<input type="text" name="email" value="" />
Good question... As mentioned in other answers one obvious use is for radio buttons so that only one radio button can be selected at a time, as you can see in jQuery radio buttons - choose only one?
Along with this, in ASP.Net MVC I have found another use of the name attribute. Refer
MVC which submit button has been pressed
<input name="submit" type="submit" id="submit" value="Save" />
<input name="submit" type="submit" id="process" value="Process" />
From http://www.w3schools.com/tags/att_button_name.asp
The name attribute specifies the name for a element.
The name attribute is used to reference form-data after the form has been submitted, or to reference the element in a JavaScript.
Tip: Several elements can share the same name. This allows you to have several buttons with equal names, which can submit different values when used in a form.
Other References
HTML5 How To Skip Navigation When Name Attribute Is Obsolete
HTML5 Obsolete features
HTML input - name vs. id