I have some models being updated from a look-up. It is the 1st line that's not updating (but the other models are updated correctly). I tried wrapping it in an $apply but that made matters worse:
function mapRequestorToForm() {
//PrimaryCtyhocnOrInnCode binding not updating
//$scope.$apply(function() {
dmpe.form.PrimaryCtyhocnOrInnCode = dmpe.requestor.primaryInnCode;
dmpe.form.hotelName = dmpe.requestor.hotelName;
dmpe.form.requestor = dmpe.requestor;
//});
}
Here's the input element. Funny thing, the pre element is displaying the correct value.
<label for="primaryCtyhocn">Primary Inn Code/ CTYHOCN</label>
<input type="text" id="primaryCtyhocn" name="primaryCtyhocn" ng-model="dmpe.form.PrimaryCtyhocnOrInnCode"
class="form-control required disabled-bg" disabled
placeholder="Primary Inn Code/ Ctyhocn"
ng-minlength="5" ng-maxlength="7" required />
<pre>PrimaryCtyhocnOrInnCode: {{dmpe.form.PrimaryCtyhocnOrInnCode}}</pre>
this one is updated correctly (line 2 of the map method, using the same source object with similar disabled attributes:
<div class="col-md-4">
<label for="hotelName">Hotel Name</label>
<input type="text" id="hotelName" name="hotelName" ng-model="dmpe.form.hotelName"
class="form-control required disabled-bg" disabled
placeholder="Hotel Name required" required />
</div>
In case someone else runs into this and their brain is failing them as mine did. It was an issue with the incoming data, it failed the max length constraint. Thanks to Michael Perrenoud!
Related
I'm trying to auto-advance to the next input field within a class once the input's max length is reached, but the code snippets I've found don't work.
Here is my HTML:
<div class="input_row d-flex justify-content-center" id="first_word">
<div class="empty_status" id="input_01" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_02" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_03" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_04" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
<div class="empty_status" id="input_05" onclick="setClass(this)">
<input class="inputs" type="text" maxlength="1" onkeydown="return /[a-z]/i.test(event.key)">
</div>
</div>
And here is the jQuery code I used:
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).next('.inputs').focus();
}
});
Nothing happens though. I added an alert to the function as well, but the alert was never called.
After Googling around, I found this sample of code on the jQuery API, which I thought might be useful to check and see if the keyup event handler was being called.
$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});
I added an id="target" to my first input field and then tried it, but it didn't work either at first. However, rewriting it as a named function, and then adding an inline onkeyup event to the input in the HTML to call it by name actually DID work.
Any thoughts on what could be wrong? I might be able to figure out a way to make the original function work that way, but I've already got enough going inline that I'd prefer not to.
I just wanted to throw this out there, in case anyone runs into the same problem.
My code didn't work for two reasons:
Since the inputs lived in different divs, next wouldn't work. Changing the code to
$(".inputs").keyup(function () {
if (this.value.length == this.maxLength) {
$(this).closest('div').next().children().focus();
}
});
worked just fine.
It also didn't work because in my HTML document, I was calling the script src in the head of my document, instead of at the bottom. Apparently, you can run into problems if the script loads before the html elements they're handling do. I didn't know that, I've only been working on original code for less than a month.
Thanks to u/virtual_lee123 on reddit for helping me figure it out.
<input type="email" ng-keypress="testFunc()" ng-model="text"
id="femail" class="form-control margin" name="femail"
placeholder="Email*"/>
<p style="color: red;">The input field has changed {{count}} times.</p>
JS
$scope.count = 0;
$scope.testFunc = function() {
$scope.count++;
};
HTML
<input type="email" ng-change="testFunc()" ng-model="text"
id="femail" class="form-control margin" name="femail"
placeholder="Email*"/>
<p style="color: red;">The input field has changed {{count}} times.</p>
JS
$scope.count = 0;
$scope.testFunc = function() {
$scope.count++;
};
If I input : "abc". Result should be : 3 but I'm getting : 0 if i delete using backspack I'm getting: 1 I should get count++ on each input which i'm not getting. I'm trying this example:
https://w3schools.com/angular/tryit.asp?filename=try_ng_ng-change
in my code. Thank you
Clarification:
In the above provided w3school example and my code difference was that I was using
<input type="email">
and w3 was using
<input type="text">
So for "text input" each button press was considered as a change but in my case each change occurs when the email is changed or it has some different functionality for ng-change with
"input type="email".
So I got the counting right now by taking
<input type="text" />
I just copy/pasted the example from W3(you provided) to test.txt file and renamed it test.html and run in Firefox. All worked fine. I did not have to edit anything. Try what I did first then you will know if it a typo or anything else. But the code is working correctly.
You can use
<input type="text" />
This is much better solution for your counter to work on.
If you want a counter use type="text" not "email". Browser treat both of them differently.
Amongst many other controls, I have the following HTML elements on a form
<input ID='cmdRegisterMe' name='cmdRegisterMe' value='Register Me' onclick="return preSubmit();" type='submit' />
<input type="hidden" ID="NewHash" name="NewHash" value="">
<INPUT TYPE="TEXT" ID="email" NAME="email" VALUE="" SIZE="50" MAXLENGTH="50">
<INPUT TYPE="PASSWORD" ID="password1" NAME="password1" VALUE="" SIZE="30" MAXLENGTH="25">
<INPUT TYPE="PASSWORD" ID="password2" NAME="password2" VALUE="" SIZE="30" MAXLENGTH="25">
and JS functions
function preSubmit() {
document.getElementById("NewHash").value = doNewHash(document.getElementById("password1").value, document.getElementById("email").value.toLowerCase());
alert(document.getElementById("NewHash").value);
document.getElementById("password1").value = '';
document.getElementById("password2").value = '';
return true;
}
function doNewHash(pw, strUsername) {
var hash_padding = '************';
return SHA1(SHA1(pw) + hash_padding + strUsername);
}
When I click Submit, I see the expected hashed value displayed by the call of alert().
However, in my PHP, the value of $_POST['NewHash'] is an empty string. I cannot fathom why this happens. In my understanding, there is no other code executed after the onclick() function returns true. I have done a global search on my code for 'NewHash' and there are no other assignments to it.
If I replace this line
document.getElementById("password1").value = '';
with this
document.getElementById("password1").value = document.getElementById("NewHash").value;
and inspect $_POST['password1'], it contains the hash value. What on earth could be happening to wipe out the value of 'NewHash'?
I have found what was wrong, but I hope posting the question may help someone else. I saved the PHP-generated HTML as a file, added to the top, and resolved to remove code piece by piece and submit until the submitted value for NewHash was no longer empty. I found I had TWO hidden controls called NewHash - so JS was displaying the value in one, and the browser was submitting the other!
I'm facing the well known Chrome's "not-focusable-input" error but my situation is different from the explained in the other post I could find there.
I have this error message duplicated first on a well pointed input, this input has no required attribute:
The code:
<fieldset>
<label>Total (montaje incl.)</label>
<input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>
The error:
An invalid form control with name='priceFinal' is not focusable.
While the user is filling the form this field gets its value by a js script with jquery. The user type a size in another input, the script do its maths with the size value and then put the outcome in the 'priceFinal' input with the jquery function: .val()
In the browser we can see that the input is correctly filled and no errors are displayed at that time. And with the 'novalidate' solution everything goes fine, so it couldn't be responsible for the nofocusable error, I think.
Then I got the same error with an input with no name which I didn't write and doesn't exist in my DOM:
An invalid form control with name='' is not focusable.
This is weird because the only input without name in my form is the type:submit one
<input type="submit" class="btn btn-default" value="Ver presupuesto" />
I have a few required fields but I've always checked that their are all filled when I send the form. I paste it just in case it could help:
<fieldset>
<input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos" class="cInput" required >
<input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
<input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>
<fieldset>
<input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
<input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required>
</fieldset>
The novalidate solution clears the error but it doesn't fix it, I mean there must be a way to solve it with no hacks.
Any one have any idea of what's might going on?
Thanks
I had the same problem, and everyone was blaming to the poor hidden inputs been required, but seems like a bug having your required field inside a fieldset.
Chrome tries to focus (for some unknown reason) your fieldset instead of your required input.
This bug is present only in chrome I tested in version 43.0.2357.124 m.
Doesn't happen in firefox.
Example (very simple).
<form>
<fieldset name="mybug">
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
An invalid form control with name='mybug' is not focusable.
The bug is hard to spot because usually fieldsets don't have a name so name='' is a WTF! but slice piece by piece the form until I found the culprid.
If you get your required input from the fieldset the error is gone.
<form>
<select required="required" name="hola">
<option value=''>option 1</option>
</select>
<fieldset name="mybug">
<input type="submit" name="submit" value="send" />
</fieldset>
</form>
I would report it but I don't know where is the chrome community for bugs.
Thanks to this post, I saw that my problem also rested with Chrome trying to focus on my fieldsets, instead of the input field.
To get a better response from the console:
Assign every DOM element a new name
Set every input & select style.display to 'block'
Changed the type of input[type="hidden"] elements to 'text'
function cleanInputs(){
var inputs = document.getElementsByTagName( 'input' ),
selects = document.getElementsByTagName( 'select' ),
all = document.getElementsByTagName( '*' );
for( var i=0, x=all.length; i<x; i++ ){
all[i].setAttribute( 'name', i + '_test' );
}
for( var i=0, x=selects.length; i<x; i++ ){
selects[i].style.display = 'block';
}
for( var i=0, x=inputs.length; i<x; i++ ){
if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
inputs[i].setAttribute( 'type', 'text' );
}
inputs[i].style.display = 'block';
}
return true;
}
In the console, I ran cleanInputs() and then submitted the form.
The result, from the console, was:
An invalid form control with name='28_test' is not focusable.
An invalid form control with name='103_test' is not focusable.
Then, switching over to the Web Developer "Elements" view, I was able to find "28_test" and "103_test" (both fieldsets) -- confirming that my problem was a required input field, nested inside a fieldset.
While I was writting the question I realized one thing: the value the script was putting into the 'priceFinal' field sometimes was a decimal number.
In this case the solution was to write the step attribute for this input:
... step="any" ...
Step on w3s
So this 'nofocusable' bug is not only a required and hidden fields issue, it's also generated by format conflicts.
Nach gave me the best pointer... (y) I also had a input type="number" with step="0.1" and the console shows me this error while validating: An invalid form control with name='' is not focusable.
remove the step="0.1" on the element and now the form can be validated
I had the same issue so I removed required="required" from the troublesome fields.
If you get the error when jQuery function is executed, try to put "return false" on your function, or function(e) { e.preventDefault(); ... }
i had this issue once. to fix it, add
novalidate
as an attribute to the form. e.g
<form action="" novalidate>
....
</form>
In my case, the input element did not have a required attribute but it was hidden. and the problem was while it was hidden, it had a value in it. I guess if an input field is hidden it shouldn't have a value too, aside required attribute.
When I remove the value through my javascript code, everything works fine.
Element is hidden, No required Attribute, No value. Worked
Here is the solution....
<form>
<input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>
Many people do not realize that passing false into ng-required disables the directive.
For example I have a textfield. The field is mandatory, only numbers are required and length of value must be 10. When I try to submit form with value which length is 5, the default error message appears: Please match the requested format
<input type="text" required="" pattern="[0-9]{10}" value="">
How can I change HTML form validation errors default messages?
If the 1st point can be done, is there a way to create some property files and set in that files custom error messages?
This is the JavaScript solution:
<input type="text"
pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Please enter Alphabets.')"
onchange="try{setCustomValidity('')}catch(e){}" />
The "onchange" event needs when you set an invalid input data, then correct the input and send the form again.
I've tested it on Firefox, Chrome and Safari.
But for Modern Browsers:
Modern browsers didn't need any JavaScript for validation.
Just do it like this:
<input type="text"
pattern="[a-zA-Z]+"
title="Please enter Alphabets."
required="" />
When using pattern= it will display whatever you put in the title attrib, so no JS required just do:
<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
I found this code in another post.
HTML:
<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);" />
JAVASCRIPT :
function InvalidMsg(textbox) {
if(textbox.validity.patternMismatch){
textbox.setCustomValidity('please enter 10 numeric value.');
}
else {
textbox.setCustomValidity('');
}
return true;
}
Fiddle Demo
To prevent the browser validation message from appearing in your document, with jQuery:
$('input, select, textarea').on("invalid", function(e) {
e.preventDefault();
});
you can remove this alert by doing following:
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity(' ')"
/>
just set the custom message to one blank space
you can change them via constraint validation api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity
if you want an easy solution, you can rock out civem.js, Custom Input Validation Error Messages JavaScript lib
download here: https://github.com/javanto/civem.js
live demo here: http://jsfiddle.net/hleinone/njSbH/
The setCustomValidity let you change the default validation message.Here is a simple exmaple of how to use it.
var age = document.getElementById('age');
age.form.onsubmit = function () {
age.setCustomValidity("This is not a valid age.");
};
I Found a way Accidentally Now:
you can need use this: data-error:""
<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>
I found a bug on Mahoor13 answer, it's not working in loop so I've fixed it with this correction:
HTML:
<input type="email" id="eid" name="email_field" oninput="check(this)">
Javascript:
function check(input) {
if(input.validity.typeMismatch){
input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");
}
else {
input.setCustomValidity("");
}
}
It will perfectly running in loop.
This is work for me in Chrome
<input type="text" name="product_title" class="form-control"
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')" />
To set custom error message for HTML validation use,
oninvalid="this.setCustomValidity('Your custom message goes here.')"
and to remove this message when user enters valid data use,
onkeyup="setCustomValidity('')"
As you can see here:
html5 oninvalid doesn't work after fixed the input field
Is good to you put in that way, for when you fix the error disapear the warning message.
<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />