We Keep Coding

Input type="text" maxlength validation is ignored on form submit

The maxlength attribute on inputs and textareas works fine for user input, but when I modify the value with Javascript or set it via value="..." and submit the form afterwards, the validation is not applied:
<form action="#">
<input type="text" maxlength="5" value="Longer than 5 chars">
<input type="submit">
</form>
Why does this not fail?
Compare with number input, where the form fails as expected:
<form action="#">
<input type="number" max="4" value="8">
<input type="submit">
</form>
According to MDN,
[maxlength] Constraint validation is only applied when the value is changed by the user.
But why? And can this be solved without Javascript? It seems redundant to validate the maxlength in two different places, first in HTML and second in Javascript.
For which attributes does this validation issue apply? maxlength, minlength, and more...? Number inputs? Date inputs? Is there a list of those so I know which ones I need to validate manually?
Edit: Here's a more specific use case:
function addChar() {
document.querySelector('input[type="text"]').value += 'a';
}
<form action="#">
<input type="text" maxlength="5" value="a">
<input type="submit">
</form>
<button onclick="addChar()">Add another character</button>
The user might click on the "Add another character" button a couple of times and then submit the form. It will not fail. If I want to prevent the user from adding too many characters, I need to add custom Javascript validation:
function addChar() {
var input = document.querySelector('input[type="text"]');
if(input.value.length > input.maxLength) {
return;
}
input.value += 'a';
}
<form action="#">
<input type="text" maxlength="5" value="a">
<input type="submit">
</form>
<button onclick="addChar()">Add another character</button>
And now, there's validation for maxlength two times in the code. This does not seem right and inconsistent compared to other validit restraints (like number input max above)

For certain input types, the pattern attribute can be most useful in this particular situation, because as you have identified, the spec treats maxlength and minlength differently as it comes to Constraint Validation.
Both minlength and maxlength require user input for the dirty value flag to be raised, triggering an invalid state, and thus forcing the validation on submit. Setting the value via a script does not raise the flag:
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-maxlength
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-dirty
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constraints
However, the pattern attribute doesn't have this unique requirement and thus will be validated on form submit, so it seems, see the example below:
function addChar() {
var input = document.querySelector('input[type="text"]');
input.value += 'a';
}
input:invalid {
border: 1px solid crimson;
}
<form action="#">
<input type="text" value="a" pattern=".{1,5}" title="You may only include a maximum of 5 characters.">
<input type="submit">
</form>
<button onclick="addChar()">Add another character</button>

Manually highlight all invalid inputs of Angular Form

The task is kinda primitive.
I got a simple Angular form with various inputs and I'd like to highlight invalid inputs manually (e.g. on submit action).
I tried to loop over invalid inputs, assuming that they must have some method to highlight an error, but unfortunately they don't.
Same with form. $setDirty() didn't work as well.
I'm using ng-form directive to get access to both form and input.
AngularJS version is 1.2.x.

You form markup should look like, so that when you click on submit ng-class will add submitted class on form that will give you idea that whenever you have submitted class on form and field has ng-invalid class, you can highlight those element
Markup
<ng-form name="form" ng-class="{submitted: submitted}" ng-submit="submitted=true; submit();">
<input type="text" name="firstname" ng-model="formData.firstname">
<input type="text" name="lastname" ng-model="formData.lastname">
<input type="submit" value="submit">
</ng-form>
CSS
.submitted input.ng-invalid {
border: solid 1px red;
}

Use ng-pattern and required it will check you validation. and onSubmiy you can customized your validation also
Example: http://jsfiddle.net/kevalbhatt18/dmo1jg02/
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<input type="submit" value="submit"/>
</form>
</div>
Js
function formCtrl($scope){
$scope.onSubmit = function(){
alert("form submitted");
}
}

form validations drop ng-model objects?

Say I have the following form:
<form>
<input type="text" required ng-model='myValue' ng-maxlength='5'></input>
{{myValue}}
{{myValue.length}}
</form>
When the length of the text in the input exceeds the maxlength, the model becomes empty. Is there any way to prevent this behaviour while applying this validation, without rolling a custom form level validator?

at first, input element no end mark(</input), the correct like this:<input name="test" type="text"/>
you can handle form.test.$error.maxlength to deal something, example code:
<form name="form">
<input name="name" type="text" required ng-model='myValue' ng-maxlength='5'/>
<div>value:{{myValue}}</div>
<div>length:{{myValue.length}}</div>
<div>validate:{{form.name.$error.maxlength}}</div>
</form>
According your means, the invalid value lead to null model, I think this is no problem.

jQuery: having radio buttons and a textarea update hidden form fields

Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.

You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});

For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?

How to skip fields using javascript?

I have a form like this:
<form name="mine">
<input type=text name=one>
<input type=text name=two>
<input type=text name=three>
</form>
When user types a value in 'one', I sometimes want to skip the field 'two', depending on what he typed. For example, if user types '123' and uses Tab to move to next field, I want to skip it and go to field three.
I tried to use OnBlur and OnEnter, without success.
Try 1:
<form name="mine">
<input type=text name=one onBlur="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=two>
<input type=text name=three>
</form>
Try 2:
<form name="mine">
<input type=text name=one>
<input type=text name=two onEnter="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=three>
</form>
but none of these works. Looks like the browser doesn't allow you to mess with focus while the focus is changing.
BTW, all this tried with Firefox on Linux.

Try to attach tabindex attribute to your elements and then programmaticaly (in javaScript change it):
<INPUT tabindex="3" type="submit" name="mySubmit">

You could use the onfocus event on field two, which will be called when it receives focus. At that point, field 1's value should be updated and you can perform your check then.

If you used the method you describe, and they worked, the focus would also change when the user clicks on the field, instead of tabbing to it. I can guarantee you that this would result in a frustrated user. (Why exactly it doesn't work is beyond me.)
Instead, as said before, change the tabindex of the appropriate fields as soon as the content of field one changes.

<form name="mine">
<input type="text" name="one" onkeypress="if (mine.one.value == '123') mine.three.focus();" />
<input type="text" name="two">
<input type="text" name="three">
</form>

Try onkeypress instead of onblur. Also, on the onfocus of field two is where you should be sending to three. I'm assuming you don't want them typing in two if one is 123 so you can just check that on two's onfocus and send on to three.